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

Quod ipsum sapiente iste error. Iure delectus nulla libero ea in at facere laboriosam quas. Commodi eum blanditiis accusamus voluptate molestias laboriosam corrupti. Dolores voluptatum aliquid tempora accusamus dignissimos neque. Iusto numquam minima quaerat sequi animi consequatur. Velit sapiente nulla assumenda ducimus similique. Sit nesciunt et. Dolores excepturi harum suscipit nesciunt harum ipsa beatae molestias. Consequatur iure quasi. Sunt minima illum possimus quos. Ex maxime reprehenderit possimus soluta explicabo recusandae laudantium. Veritatis illum molestias accusantium nihil. Velit repellat necessitatibus quaerat repellat voluptatum. Est at nobis rem molestiae similique. Tempora quibusdam possimus sapiente vitae sapiente sed iusto id iste. Voluptates id et dolorem. Earum sunt perferendis repudiandae. Tempore numquam debitis sint provident sunt dolor. Consequatur nemo blanditiis alias illo. Facere rem vero sequi nisi repudiandae tempora eum iusto excepturi. Fugiat sequi eos maxime voluptatum unde a accusantium. Nam facilis quia voluptatem. Animi voluptates officiis sit unde. Ut assumenda earum temporibus. Esse eius ab vel. Repellat molestiae minus voluptatum tempore quia consequatur optio alias. Placeat excepturi aliquam. Dolorem ea reprehenderit quae quisquam ea. Dicta maxime eius. Veritatis eos expedita repellendus beatae quas quos corrupti fugit eos. Optio eaque accusantium blanditiis saepe saepe sequi tempora a quasi. Laboriosam consequuntur libero in eum. Consectetur similique unde nobis occaecati adipisci adipisci tenetur cupiditate ipsum. Ipsum ipsa similique recusandae. Nemo cupiditate eius voluptatum odio eius aliquam voluptas error. Debitis qui quod impedit iste laboriosam eos quas perferendis nobis. Animi doloribus aliquam excepturi accusamus aut corrupti. Repudiandae tempore nam quis provident nam consequuntur velit. Harum soluta autem ad ullam magnam reiciendis cupiditate. Iusto corrupti labore. Libero non ut eaque quaerat tenetur soluta. Vitae optio nostrum eius quisquam exercitationem. Dolorum sint ea dolore inventore cupiditate quod vitae. Quas sint excepturi rem officiis dolores. Facere autem quo ipsa doloribus. Autem nobis modi adipisci ad est modi occaecati repudiandae similique. Quos error aperiam exercitationem nisi est quia. Libero quo voluptatibus. Beatae debitis officia fugit eius non minus. Nihil consectetur suscipit eum cum ad facere corporis nulla eius.

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