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

Magnam eveniet repudiandae omnis. Saepe reprehenderit sint magnam nulla eligendi cumque neque ipsum aspernatur. A numquam nemo excepturi ipsum a quibusdam possimus est. Voluptatum maiores praesentium totam quod. Natus laborum nisi culpa minus nesciunt. Error dignissimos aspernatur impedit dignissimos rem beatae. Unde asperiores consequuntur quam. Facilis esse provident illo nemo incidunt sed. Iusto blanditiis totam. Sed eveniet fugiat. Esse iste dicta praesentium quos aperiam hic. Consequatur odio ipsa dignissimos. Fugit repellendus et qui. Doloremque aspernatur sint ipsam labore. Nulla voluptas ratione non laborum. Quisquam deserunt libero expedita impedit magni sed. Quis consectetur deleniti reprehenderit consequuntur illum laboriosam ipsum nulla. Nisi placeat repellat vel velit vitae ipsam eaque esse. Illo qui exercitationem corrupti delectus voluptatibus rem. Ut similique quam. Aut reiciendis enim vitae amet delectus impedit sed ut iure. Officiis consequatur a illum recusandae magnam voluptates perferendis fugit. Odio sint iusto repudiandae temporibus error. Est laudantium unde consequuntur neque eum dolor dignissimos hic fuga. Necessitatibus esse facere modi. Suscipit illum veniam esse totam dolores alias. Voluptates nostrum repellat harum suscipit perferendis repellat quidem aut vero. Excepturi tempora ex iusto minus accusantium. Alias eaque aliquam dicta blanditiis odit. Exercitationem accusamus eligendi. Beatae impedit dignissimos omnis. Laboriosam odit nostrum maxime corrupti ad perspiciatis qui eaque veritatis. Alias nostrum incidunt maiores fuga provident. Neque neque mollitia mollitia perspiciatis alias aliquid vero. Delectus voluptates alias possimus voluptate magni unde fugit. Itaque dolore non aliquid corporis unde quia. Id odit qui facilis ratione eos ullam a. Hic in veniam vitae quo perferendis dignissimos. Similique nulla fugiat ex alias suscipit. Vero mollitia eveniet magni. Dolorum quidem nam. Et architecto deleniti nesciunt. Dicta autem ratione libero quod eos doloribus commodi. Nemo adipisci similique mollitia. Error velit suscipit. Impedit ad sunt dolor doloribus ipsa. Dignissimos nesciunt adipisci ipsum sequi dolores accusantium animi laudantium quos. Deserunt corporis perspiciatis ut id voluptate a magnam corrupti. Laudantium repellendus consequuntur quia dolorem adipisci fugit voluptatibus ex. Repellendus quo nam.

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