Tailwind

Core

Provides a variety of globally scoped styles.

Source Page Source

Body Background

Your app's background is automatically set via a design token class. Adjust your theme's color scheme to customize. This affects both light and dark mode.

css 
body { @apply bg-surface-50-900-token; }

Selection

Selection color is also set via a token class. Try selecting the text in the card element below to preview this styling. Notice how selection color changes depending on the background.

The quick brown fox jumps over the lazy dog.

Try selecting the text above.

Mobile Focus

Interactive elements on mobile will briefly show a focus style when touched. Skeleton adjusts the coloring.

Scrollbars

Skeleton automatically provides custom scrollbar styles in supported browsers. Use .hide-scrollbar to disable scrollbars.

Test Scrolling Here

Nostrum impedit enim corporis unde reprehenderit facilis beatae. Modi nulla repellendus voluptate officiis mollitia id tempore. Culpa aspernatur molestias maxime eligendi autem. Porro labore quis iusto et fugit. Maxime distinctio unde aut qui. Voluptas maxime quae nemo cumque voluptatem ratione dicta necessitatibus. Accusamus officiis cupiditate eaque quis officiis magni. Incidunt illum accusamus voluptatum id. Repellendus architecto aliquam enim ratione. Eveniet similique aspernatur maxime quia asperiores voluptatum quod. Eaque incidunt distinctio itaque placeat optio facilis. Optio veniam illo esse nobis numquam ea enim voluptatum. Ipsa repudiandae alias optio praesentium voluptatibus in veritatis. Maiores laboriosam quam eveniet quis dolores neque aut nisi distinctio. Necessitatibus ratione tenetur dicta magni eligendi. Esse fuga iure unde iusto iusto harum quia corrupti odit. Placeat consequuntur quidem aliquid accusamus omnis quo. Illo distinctio quibusdam sed. Odio ipsa pariatur. Est beatae aliquid. Distinctio repellat inventore alias eligendi. Magnam eius fuga. Id tempore hic exercitationem necessitatibus quae mollitia repellendus. Modi accusamus iste consequuntur iste voluptatum dolorem mollitia commodi. Tenetur repellendus ducimus ut eius nesciunt quos autem. Sunt optio sapiente consequatur. Nobis veritatis praesentium ipsam sunt itaque incidunt ad. Ipsum facilis enim. Vero fugit voluptatum voluptatibus non doloremque cumque sit ratione. Officia aut beatae animi vitae accusantium velit asperiores suscipit modi. Ad quis quis odio maiores nisi sed deserunt veritatis. Voluptatum consectetur tempora aut sunt nihil fugit odit possimus reiciendis. Hic eius corporis dolores dolorem tempora voluptas necessitatibus voluptate. Incidunt voluptates cumque adipisci at ullam. At ratione atque debitis mollitia ullam reprehenderit. Officiis enim dolore dolores quas. Expedita nesciunt vel iusto incidunt quod doloribus laborum consectetur animi. Explicabo ratione sunt et. Officiis natus cupiditate. Voluptas doloribus illo maiores. Ipsam laudantium iste veniam provident aut iure. Omnis in molestiae illo eum saepe autem. Molestias rerum voluptates beatae quibusdam. Officiis earum reprehenderit ea expedita. Tempore harum delectus repudiandae rerum sunt alias odio ipsam accusamus. Dignissimos aliquid deserunt ullam temporibus necessitatibus perferendis quidem nam officiis. Excepturi a dolor aliquam iusto distinctio nobis aspernatur esse. Modi quaerat tempore vitae. Beatae iusto deserunt laboriosam blanditiis eaque occaecati ut. Voluptatem totam libero ab cumque accusamus ipsa architecto.

Dividers

Native hr horizontal rule elements respect your theme settings automatically. Use border size to adjust the width.

Divider Styling

Dividers may be dashed, dotted, or doubled.

Vertical Dividers

Divide columns with the .divider-vertical class. You can apply it with a span tag. Adjust the height as desired.

Left

Right