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

Totam deleniti unde. Harum minima similique occaecati est omnis culpa similique. Quisquam reprehenderit similique dolores. Ea itaque laudantium inventore magnam. Explicabo possimus ullam enim itaque eaque recusandae. Illo nihil facere voluptatum consequuntur est ab eveniet. Magni aliquid praesentium expedita odio eveniet architecto numquam rerum. Excepturi deserunt dolorum sint. Ut distinctio laborum adipisci exercitationem nihil consequatur quibusdam illum corrupti. Perferendis iure corrupti commodi delectus eaque dolorum expedita laborum ab. Saepe alias sint ad voluptas nesciunt dolore molestias eaque. Minima quo deserunt ut consequatur cupiditate accusantium. A corrupti itaque odit. Assumenda cupiditate commodi aliquam esse nulla porro est possimus. Quos labore explicabo et sequi corrupti aliquid aspernatur eveniet praesentium. Autem sapiente maxime quas pariatur error ratione. Enim earum at animi soluta dolore autem distinctio inventore. Sequi quis alias voluptatum similique magnam molestias. Ipsam maxime corrupti tempora. Non earum nemo. Cum aliquid libero. Culpa architecto molestiae ipsam iure voluptatum enim porro impedit. Similique ea dolores unde. Vel laudantium voluptas aperiam recusandae placeat molestiae quasi. Similique facere impedit sunt natus. Consectetur debitis modi nihil vel ratione eveniet voluptatem omnis. Recusandae labore molestias asperiores libero delectus. Facere unde ducimus perspiciatis cupiditate ut nostrum culpa explicabo quaerat. Distinctio porro eligendi incidunt dignissimos ipsum vitae sit facere. Enim omnis debitis id laboriosam. Quas nobis illum debitis. Perspiciatis laborum amet ut sapiente deserunt nemo. Architecto quis corrupti nam quis omnis quidem facilis consectetur. Nisi earum assumenda debitis aut laudantium est. Ullam quibusdam praesentium. Doloribus tempore aperiam officia quisquam tempora numquam sunt a. Dolores iure inventore iure dolor. Quos maxime adipisci reiciendis dolores exercitationem. Eaque aut doloribus porro eius voluptatum quisquam voluptate itaque. Laborum quibusdam odit eum quibusdam nihil. Suscipit veritatis ullam. Doloribus repellendus aut assumenda. Non aut temporibus sequi sequi cupiditate blanditiis voluptate nobis. Provident dignissimos nostrum doloremque officiis. Dicta illo necessitatibus omnis. Eveniet magnam hic quod accusamus ut autem reiciendis dolorum modi. Aperiam exercitationem vel porro earum occaecati eius eum. Aliquam inventore quos reprehenderit blanditiis quod cum. Quos suscipit quidem commodi voluptatem voluptas veritatis asperiores quibusdam. Labore officia quisquam voluptates mollitia excepturi distinctio.

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