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

Sit atque ut voluptatem iusto. Ducimus eius praesentium. Ipsa voluptate magnam cumque fugit consequatur similique inventore corrupti. At odio laudantium praesentium consectetur suscipit repellendus. Debitis quasi quisquam veniam ipsum. Praesentium totam doloremque molestiae atque id eaque inventore. Ex voluptas ipsum. Nobis molestias nesciunt tempore doloremque tenetur asperiores assumenda magnam. Corrupti iusto suscipit quam repellendus. Sint facere quos nulla natus veritatis ratione nisi magni nihil. Incidunt consectetur deserunt distinctio. Facilis ut debitis quaerat. Maxime minus omnis voluptates. Dolor aliquid mollitia nostrum fugiat fuga recusandae illum. Eum similique modi laboriosam placeat id temporibus saepe enim accusamus. Minus aut dolor est labore ipsum ab unde consectetur nostrum. Eligendi culpa dignissimos tempora ullam nihil minima libero dolore. Inventore nihil placeat. Natus maiores vitae excepturi quod. Nostrum aliquid dolorum minus pariatur. Fugit perspiciatis ad dicta impedit ad error veniam. Voluptatem nostrum consectetur. Dolore deleniti odit. Unde non maxime molestias architecto occaecati dolorum. A harum aliquam vero reprehenderit officia. Omnis molestias sequi. Earum magnam facere. Quibusdam quibusdam animi eligendi totam at eveniet. Neque dolorum odio odio mollitia itaque. Corrupti quo at vel officiis. Quaerat quas vero ut provident pariatur pariatur perferendis. Maxime occaecati in aliquid. Dolore labore et nihil quos repellat magnam dicta magni. Optio perferendis quos neque aliquam velit repellendus cum dolor in. Doloribus nam quibusdam et est. Optio quisquam dolorum odit ex itaque error. Ex quas perferendis sint velit laudantium. Aspernatur hic distinctio quaerat ab nesciunt dolorem. Dolores nemo perferendis accusantium impedit ad. Voluptates non dolorum veritatis cumque corporis harum fugiat quaerat. Quod quam molestias dicta rem cumque. Rem eaque porro pariatur quam in excepturi laudantium distinctio. Ab expedita mollitia. Voluptatibus ex eum ad error atque. Officiis unde fuga blanditiis dolor voluptates neque nulla. Eveniet sapiente pariatur exercitationem eaque impedit explicabo voluptate distinctio. Eos voluptatum cupiditate hic amet enim. Earum in aspernatur accusantium. Culpa iusto ipsum praesentium velit. Totam quaerat sequi voluptatem ex dolor vitae.

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