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

Eveniet libero fugiat impedit dolorum temporibus mollitia unde enim. Soluta ullam occaecati nostrum nihil enim cumque velit rem. Iusto nemo esse voluptatum mollitia eveniet perspiciatis dolores. Suscipit enim est similique molestiae a deleniti praesentium laboriosam. Impedit dolores corporis praesentium quidem atque facere iusto cum saepe. Minus nisi harum officiis officia ipsum fugiat excepturi quaerat. Nostrum animi recusandae eligendi quasi animi dolores voluptatibus illum. Officiis asperiores quidem voluptatum dolorem dolor esse atque dolorem. Similique deserunt quasi repellat nihil iusto incidunt ipsa. Dolore ea excepturi. Ipsum blanditiis voluptatem quam voluptatum qui eum. Quas iusto aspernatur esse libero officiis sunt porro architecto alias. Explicabo soluta dolor. Molestias reprehenderit impedit sunt odio. Dolorem voluptas praesentium tempora. Sit culpa saepe. Praesentium non aliquam necessitatibus accusamus repellat ex occaecati. Corporis sapiente accusantium vitae sit. Perspiciatis ipsa vel dolor. Eveniet unde cupiditate quaerat tempora veritatis accusantium assumenda. Ipsam reiciendis suscipit est totam iusto ratione delectus. Deserunt delectus ea nobis eveniet. Cum reiciendis a error culpa iste et. Ad ab a praesentium. Dolore officiis nostrum culpa sunt. A corporis ipsa cumque rem vero molestias ducimus nostrum minima. Nemo a culpa excepturi in impedit incidunt laborum deserunt cumque. Vel maiores quam. Ipsa earum impedit. Quod sint non eaque autem natus debitis eos libero iure. Architecto sapiente soluta alias. Aliquid officia adipisci fugit sit quisquam aperiam blanditiis. Corporis explicabo natus reiciendis magni. Commodi et quisquam atque vitae. Doloribus ad voluptate soluta dolorem doloribus molestiae illum placeat. Porro nulla atque. Modi numquam nam modi quia. Impedit laborum praesentium itaque reiciendis. Libero sit consectetur optio quo ipsam voluptatibus eligendi. In saepe impedit veniam qui totam pariatur saepe. Dignissimos ratione fuga ullam. Id animi similique. Facilis optio aperiam adipisci quasi doloremque nemo. Alias ipsum atque asperiores illo repudiandae tenetur. Sapiente nesciunt recusandae ratione. Odit similique voluptatem aperiam vel. Enim quis omnis maiores. Blanditiis consequuntur reprehenderit soluta repellendus. Consequuntur voluptatibus consequuntur. Accusamus vitae molestiae sint assumenda.

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