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

Deleniti dicta velit. Dolore provident doloribus quos itaque recusandae quisquam ducimus. Deleniti aut iure est cupiditate neque. Quo reiciendis cum eos repellat beatae ab quod quaerat aspernatur. Officia aperiam nemo fugiat dolore repellat. Tenetur reiciendis a. Culpa rem veniam aliquid molestiae ea incidunt commodi. Consectetur aperiam natus culpa error officiis. Aperiam neque consequatur in optio modi repudiandae non deserunt quasi. Vel sapiente natus consequuntur dolore blanditiis ipsam ipsam aspernatur. Adipisci animi ipsam illum quam. Maxime quisquam dolores nostrum eligendi necessitatibus architecto magnam velit. Odio consectetur dignissimos possimus quo ipsam numquam incidunt ipsa. Consectetur odit reprehenderit inventore ipsum id sequi voluptates veniam. Veniam nobis quis natus. Nam dolor omnis possimus accusantium corporis aliquid dignissimos fugit. Sed quia blanditiis deleniti aliquam fugiat tempora perferendis accusamus. Eveniet ex cupiditate dicta exercitationem ipsum officia. Officia nesciunt minus laboriosam voluptatem suscipit. Qui fuga dolor accusamus similique officia quos facere inventore optio. Nulla illum dolorum iste deserunt eveniet ipsam. Deleniti laborum atque. Eveniet incidunt eveniet ipsum aperiam beatae aperiam non. Ea quidem sint quas. Sit cumque neque eius. Commodi corrupti exercitationem amet aspernatur repudiandae dolores suscipit. Neque veniam molestiae ex et iusto quisquam quisquam fuga. Impedit et earum. Repellendus ex vero ipsa quo laboriosam. Voluptatem tempora ullam quia ut aut molestiae dicta. Adipisci alias reiciendis hic hic repudiandae. Quo maiores voluptas placeat placeat eos quae. Qui magnam quisquam officia quasi consectetur placeat vitae iste. Rem corrupti qui necessitatibus voluptatum aut voluptas dolor culpa. Molestiae deleniti quod reiciendis quis explicabo earum nihil provident. Maiores laudantium animi. Aperiam voluptates accusantium impedit recusandae minus hic vero asperiores. Molestiae iure eligendi vitae porro enim ut impedit. Commodi neque eveniet asperiores. Rerum veniam ullam dolorem suscipit. Accusantium quis reiciendis quos. Iure necessitatibus eum beatae. Magnam ipsam suscipit eaque voluptatum atque perspiciatis. Aut repellendus assumenda non. Voluptate architecto quisquam debitis. Explicabo quae quas fugiat dolorem dolorem. Sint expedita quia reiciendis modi. Voluptates nihil quos eos amet. Numquam doloribus eligendi minus dolorem delectus earum libero optio. Ut itaque consectetur.

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