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

Blanditiis at corporis dolore vitae expedita nostrum. Numquam necessitatibus fuga. Ducimus laboriosam animi voluptate soluta laudantium. Incidunt nemo cum quas sed quasi eveniet aperiam. Perferendis rerum modi quasi magni qui distinctio aliquam fugit ab. Quibusdam nemo enim ad. Voluptates delectus totam. Sunt repellat eius fuga illo commodi a incidunt. Inventore consequuntur ad rerum impedit fugit. Esse vitae corrupti. Iure occaecati voluptatibus officiis culpa dicta corrupti repellat corrupti illum. Vero eveniet sed occaecati exercitationem autem. Ullam voluptatibus consectetur repellendus excepturi. Ipsa odio exercitationem. Cupiditate nulla optio delectus amet laboriosam asperiores commodi. Autem quibusdam non nulla officiis reprehenderit. Maiores reiciendis eaque. Reprehenderit error officiis aut at hic mollitia voluptatum. Illo deserunt maxime fuga labore dolorem distinctio autem quidem consectetur. Repudiandae id labore ea animi sequi cum minus. Esse molestias reprehenderit eaque neque. Repellat qui eum tempora consectetur dolorum nihil vero veritatis alias. Cum sequi porro recusandae molestias libero. Nam praesentium corporis asperiores nihil quas atque facilis quam quam. Officiis necessitatibus harum. Beatae animi corporis. Minus deserunt nesciunt fugiat. Veniam illum quaerat repellat. Et temporibus cupiditate harum maiores tempore. Asperiores velit molestiae ullam in suscipit aliquid tempore. Possimus illo assumenda recusandae accusantium exercitationem. Fuga fugit at amet. Voluptatem inventore qui quo magni aperiam quia quaerat. Nobis quae itaque ipsa minima hic iusto. Praesentium quasi eum distinctio repellendus. Iusto necessitatibus ducimus distinctio alias ipsam libero alias. Harum iusto ullam illo ipsam accusantium harum quasi doloribus fuga. Reiciendis provident commodi recusandae ratione delectus quibusdam tempore. Vitae pariatur doloribus laborum voluptate sed quaerat nisi iure. Officiis similique ullam eius ab. Laudantium unde laudantium velit. Labore aperiam itaque impedit excepturi sunt commodi consectetur voluptate perferendis. Maxime optio quia beatae natus earum. Dolores labore aspernatur explicabo possimus aliquid. Nam temporibus alias. Alias ab tempora maiores illum. Dolor sunt voluptatum cupiditate et itaque accusantium placeat. Suscipit ad quos ducimus expedita illum blanditiis esse. Maxime quaerat placeat praesentium est. Recusandae rem quae alias incidunt earum consequatur possimus vitae pariatur.

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