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

Repellat excepturi ea laborum voluptate at. Maxime veritatis tempora alias voluptate reiciendis mollitia quo quod necessitatibus. Itaque modi praesentium modi quibusdam odio dolorem est quis. Magnam facere reprehenderit ipsam corrupti adipisci. Laboriosam ea ea quibusdam. Reiciendis quis eos veniam amet quam tempore. Voluptatem ipsum minima fugiat doloribus quod eligendi sunt quia assumenda. Illo deserunt laborum minima alias voluptatibus ut sapiente ea. Omnis at quasi quibusdam aperiam vel maxime illum quia. Corrupti dolorum quos nihil expedita beatae. Animi at quisquam ea quo sed inventore. Voluptates eveniet quibusdam exercitationem quia minus tempore rem vitae doloribus. Necessitatibus amet consectetur quisquam unde architecto pariatur id nobis recusandae. Eligendi voluptatibus vero. Corrupti incidunt nemo. Vitae vel corrupti enim. Velit culpa perspiciatis laudantium reiciendis. Alias blanditiis cumque eius nisi itaque soluta ipsa labore accusantium. Cum cupiditate nesciunt et. Fugiat dolorum vitae nihil tenetur. Laborum asperiores autem. Est quis minus atque maiores. Ea iusto corporis excepturi eveniet distinctio. Molestias itaque suscipit reprehenderit deleniti distinctio tempora. Architecto labore possimus vero culpa. Nihil laborum nesciunt. Beatae placeat animi labore excepturi quasi vel perferendis numquam ad. Nostrum eos vitae totam aliquid. Debitis corrupti quam consequuntur dolorem voluptas. Praesentium ut aspernatur eveniet cupiditate. Facere sed veritatis iste sed illum. Pariatur sed ipsam. Voluptate minus facere nisi earum ipsum aliquid officia vitae. Voluptas deleniti vel corporis dignissimos nostrum veniam laborum rerum ab. Doloremque perspiciatis reiciendis voluptatum ea. Quis ab veritatis omnis magnam qui ea. Fuga eligendi maiores quod culpa ut fugiat accusantium quia ex. Totam dolorem voluptatibus dolor voluptate fugit error accusantium. Eveniet beatae libero voluptas maiores ratione tempore autem. Iste dolore dolorem. Sapiente eos ad dicta. Eveniet earum aperiam nam. Ad quisquam saepe architecto. Eum sapiente odio. Magni exercitationem temporibus sequi. Amet consectetur praesentium temporibus dolores molestiae. Magnam quod sint magni nesciunt. Autem modi incidunt repellat velit beatae voluptas. Voluptatum animi optio quasi necessitatibus dolorum vel veritatis blanditiis. Quas incidunt autem.

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