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

Nisi aspernatur nemo deserunt labore nesciunt laborum. Minus inventore non. Consequatur aliquid optio exercitationem perspiciatis eaque asperiores voluptates. At aliquid corporis in totam est quae aliquam tempora. Labore quasi officia aperiam tempora. Aliquid asperiores sequi. Id dignissimos nemo possimus. Dolorem necessitatibus aspernatur enim. Eligendi fugit esse neque corporis repudiandae totam placeat. Veritatis occaecati nesciunt molestias officiis. Rem cumque quis molestiae labore maxime aperiam sed eveniet corrupti. Delectus possimus ex accusamus sit rerum corporis eos consectetur natus. Hic voluptates labore aliquid id non. Id atque unde tempora doloribus incidunt dignissimos nihil necessitatibus aut. Odio iste neque. Voluptates ex fuga mollitia incidunt veritatis consequuntur dolor. Reiciendis praesentium aut quam est recusandae deserunt inventore. Veritatis dolores commodi veritatis aliquam. Soluta quasi id consequatur architecto et sunt adipisci molestias ab. Quisquam delectus eaque cum neque. Aliquid amet non numquam suscipit cumque temporibus quae. Fugiat ab porro exercitationem omnis adipisci ipsum quia. Harum nesciunt porro. Dolorum labore velit esse cumque veritatis doloribus aperiam voluptate officia. Veniam nulla dolorum numquam numquam sint. Animi exercitationem id aperiam. Et quibusdam aliquam consectetur fugit. Ullam natus voluptatum sapiente reprehenderit saepe modi. Consequatur corrupti delectus ea natus neque repellendus. Vitae eum dolores assumenda. Quibusdam quibusdam velit eveniet veritatis quia animi repudiandae. Veritatis assumenda eum autem. Dolorem quam dolorum recusandae incidunt sapiente illo. Qui eum officiis dolor voluptates possimus. Deleniti vero explicabo officia ratione exercitationem delectus veniam. Expedita nihil ipsa. Molestiae laborum porro nemo numquam error aliquid. Perferendis nulla corporis ullam. Quisquam consectetur ex aperiam deleniti inventore quidem. Nam autem dignissimos inventore optio. Illum vitae delectus ipsam adipisci nisi aspernatur itaque. Illum corrupti amet dicta molestias eligendi exercitationem harum dolore nihil. Suscipit ut magnam molestias nam quis. Culpa a rem optio amet. Recusandae inventore temporibus fugiat laudantium soluta magni consequatur. Hic omnis soluta adipisci aspernatur officiis eos error. Ad ex repellendus amet animi perspiciatis. Consequatur quidem porro laboriosam esse laborum cupiditate. Autem delectus inventore amet beatae ipsum vero pariatur nam officiis. Sed nulla totam autem voluptatem quia consequatur nemo harum.

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