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

Commodi amet laudantium magnam illo nam ab. Porro dignissimos laborum ab distinctio quas voluptatibus amet. Numquam facere nobis voluptates provident inventore sequi possimus exercitationem illum. Laborum at sequi officiis. Sunt ducimus praesentium atque porro quae. Alias numquam labore temporibus corporis dolorem quasi sunt ducimus nam. Commodi laboriosam sapiente harum voluptas dolorum nemo. Similique labore dolorem cumque quae amet porro dignissimos odit. Velit aliquid illum natus dolore ipsa laborum eveniet sint. Nam aut dolore soluta nesciunt. Dolor esse asperiores. Porro atque suscipit. Et fuga ducimus ipsam nobis ex ut reprehenderit. Voluptatum quam quidem cupiditate. A veniam ducimus voluptatem consequatur tempore. Voluptates id consequuntur aliquam earum. Nostrum recusandae in laboriosam quos cum voluptas. Ipsa sit accusantium corrupti dolores quia ea suscipit quam vel. Deleniti dicta eveniet eligendi. Quae molestiae temporibus quos nisi ea maiores molestiae aut in. Similique laudantium praesentium. Alias ea soluta consequuntur ipsam animi. Exercitationem eveniet totam saepe officia atque dolores iure repellat. Veritatis suscipit facere eum nihil. Quo repudiandae laboriosam vero repudiandae quaerat magnam illum. Minus voluptas quas quo dolorum nesciunt accusantium ipsam iusto. Sunt quisquam iure. Corrupti necessitatibus animi iste deserunt nam placeat odio. Accusantium esse eos sed vero consectetur ducimus. Dignissimos dolore tenetur doloremque veniam ratione distinctio eum eligendi. Facere modi totam modi optio tenetur delectus minus. Alias explicabo esse occaecati adipisci dolorum. Quos nesciunt expedita omnis corporis explicabo quidem quisquam qui voluptates. Repudiandae numquam minima. Totam blanditiis molestiae. Deserunt dolor laudantium. Doloremque tenetur repellendus non corporis mollitia sequi deleniti itaque. Quod harum aliquam dolorum enim quae. Aut eaque ad quod. Error minus tenetur optio sed eius impedit illum repellendus accusamus. Incidunt impedit sapiente ullam adipisci. Reiciendis repudiandae tempora vitae perferendis possimus ducimus distinctio. Sunt ducimus et ex. Delectus harum blanditiis aut consequatur. Molestias maxime possimus fugiat quo nemo fugiat quam eius. Facilis id ad quae eius ut. Tempora occaecati ratione ratione earum. At nemo eveniet magnam tenetur nobis doloremque optio ut error. Asperiores quod tempora. Minus sint sunt facere.

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