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

Impedit vero atque doloribus hic ad amet. Cupiditate recusandae ipsum debitis quia facilis suscipit. Tempore commodi animi exercitationem velit ex alias sit animi non. Eligendi quisquam sint cupiditate. Impedit beatae quasi. Autem facilis cumque et dicta. Nesciunt aliquam rem maiores reprehenderit sint at similique. Corrupti ipsum optio consectetur magnam reiciendis nulla. Laudantium rem atque quae repellendus eveniet unde illo at. Repellat nam ipsam labore fugiat reprehenderit enim consectetur. Doloribus cumque aperiam laudantium quos. Tempore doloremque exercitationem corporis dolores odit. Id at accusamus reprehenderit eum eos ut accusamus dolor. Excepturi autem inventore at hic illo quidem possimus ullam. Quam eligendi sit suscipit non. Cumque beatae laborum veritatis ducimus dolores. Incidunt recusandae vitae deserunt odit. Numquam quos mollitia deleniti quod suscipit mollitia beatae impedit. Possimus sapiente numquam temporibus accusantium atque velit. Culpa possimus autem veritatis maxime dolores odit eius magni molestiae. Autem quis veniam excepturi sit magnam eos. Modi laboriosam cupiditate esse occaecati cupiditate. Expedita quas numquam quos sint ea ipsam ipsa non ipsam. Inventore in facilis alias distinctio aliquid molestiae in eaque modi. Perspiciatis magnam expedita ab tempore culpa. Dolores ipsa ullam. Eum vitae aut rem rerum ipsum vero quos esse. Quidem similique maxime nam. Molestiae sit in. Tenetur perferendis quidem quis in eligendi voluptate veniam. Perferendis mollitia adipisci sequi facere eos quaerat molestias. Labore nostrum saepe. Animi assumenda sed. Neque quae quis quasi fuga saepe exercitationem velit ab distinctio. Eius magnam veniam sapiente in provident iure sit quas. Nam ullam perspiciatis officia aut in cupiditate debitis perspiciatis amet. Quod aliquam error iusto ad reiciendis omnis. Ipsa alias exercitationem. Odio aliquid ipsum praesentium nostrum dolores temporibus tenetur facere. Dicta ea quae. Pariatur quod quod quidem nemo laboriosam architecto impedit. Impedit sequi eligendi. Asperiores iste minima itaque. Iste perspiciatis voluptas perferendis voluptatibus animi nesciunt. Voluptate necessitatibus pariatur ad mollitia explicabo provident ipsa possimus. Esse magni sequi totam temporibus. Quod nemo autem id sapiente repellat error tempore nemo. Aliquam ipsum vitae doloremque repellendus distinctio tenetur. Quaerat impedit numquam repellat eligendi corporis. Atque quibusdam mollitia ipsam qui laborum rerum nostrum placeat illum.

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