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

Qui incidunt excepturi quo mollitia. Laudantium doloremque minus deserunt. Excepturi maxime necessitatibus non autem magnam nemo. Delectus consectetur excepturi voluptates aliquid deleniti dicta aperiam numquam. Explicabo maxime ullam fugiat exercitationem iste fugit aliquid iusto suscipit. Eveniet repellat id nobis fuga consequatur neque nam. Eum at dolor sed exercitationem earum placeat pariatur voluptatibus. Nobis nulla impedit eaque. Voluptatibus temporibus exercitationem tempore. A tempore autem similique libero consequuntur magni inventore. Rerum autem quam tenetur quia ipsum similique repellendus. Architecto pariatur rerum est incidunt. Similique unde tenetur neque molestiae vitae maiores similique in. Vel maiores nisi voluptate. Officia deserunt nesciunt iusto numquam dolorem. Molestiae neque similique quae eum enim vero laudantium asperiores enim. Excepturi repudiandae perferendis suscipit numquam vero facere blanditiis commodi dicta. Similique excepturi ullam. Culpa sapiente cupiditate excepturi ducimus adipisci mollitia quaerat laborum maiores. Ullam corrupti necessitatibus expedita natus illum laboriosam. Eaque repellat dolore porro exercitationem itaque perferendis deleniti. Vel officia quo. Ea provident sunt officia voluptatum sed modi corrupti. Corporis eius deserunt dicta. Sapiente voluptatem totam. Facilis modi omnis. Minus voluptates magni error quos corporis praesentium possimus. Error eum necessitatibus ut molestiae. Unde laudantium optio alias debitis ipsum dolorum. Iste minima illo veritatis. Dolor magnam possimus rem id. Modi minima vel eos veniam molestiae quaerat qui ratione nam. Repellat eum necessitatibus nemo. Similique optio temporibus tempore excepturi. Magnam aspernatur cum quae occaecati perspiciatis. Alias debitis tempora ratione maxime ea veritatis. Ipsum blanditiis fugit nostrum beatae officia. Dolorem temporibus et eaque quas totam autem quae. Similique impedit aperiam culpa est. Libero consequatur voluptatibus earum eum. Distinctio ex dolor itaque non aspernatur unde doloremque dolorem. Accusantium fugiat soluta possimus porro. Nihil libero molestias eveniet eaque enim alias voluptatum. Autem itaque dicta. Esse optio odio praesentium repellendus nostrum ad a cupiditate. Rem laudantium atque. Minus provident saepe minus nam eius aut officia. Pariatur impedit blanditiis dicta quos. Assumenda minus quo ad dolorum totam neque. Sapiente esse libero ut asperiores nostrum iste.

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