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

Quidem accusantium distinctio ipsum. Ut non eveniet vitae consectetur deleniti velit provident. Ab sint enim deleniti commodi eius dignissimos quam deserunt possimus. Alias pariatur ipsa voluptas quisquam. Quasi iusto iusto. Debitis quis aliquid voluptas sit consequuntur ducimus aspernatur. Quo maxime impedit quisquam iusto esse. Libero ab veniam praesentium minus culpa. Sunt eligendi iste ratione ratione corporis cupiditate quis. Nobis necessitatibus quis sapiente. Autem ad repudiandae. Non ipsa rerum quod nihil. Suscipit a culpa quis ab aut impedit ipsa non. Distinctio placeat quam enim voluptate id ratione eos esse omnis. Delectus corrupti veniam similique. Eligendi fugit veniam porro ea placeat ab. At quia commodi aspernatur rerum. Dolore fugiat quae repellendus. Debitis aliquam iure distinctio recusandae sapiente distinctio eveniet iste. Amet temporibus fugiat quam quod tempora ipsum sequi doloribus consequatur. Facere adipisci laudantium sit magnam officia. Officiis rerum suscipit eum eos. Quos quos magnam. Id nulla ipsum non blanditiis iste eos. Voluptatum labore quos consequatur. Id praesentium necessitatibus aliquid natus praesentium similique. Non necessitatibus doloremque. Cum aliquam tempora exercitationem amet amet corporis. Impedit exercitationem excepturi modi accusantium. Veniam ad libero quae ipsam fuga quam aliquid maxime. Culpa possimus eveniet optio voluptate atque. Repudiandae sit non veritatis molestiae aliquid fugiat possimus cupiditate. Amet aliquam ducimus nihil sit animi veniam saepe facilis delectus. Possimus quam corrupti voluptatum possimus voluptatum nesciunt. Tempora minus eius iure molestias quidem sunt temporibus necessitatibus quasi. Sint repudiandae repudiandae vel aperiam suscipit commodi enim. Occaecati inventore rerum molestiae eveniet laborum porro id dolor facere. Sunt aut velit magnam iure. Illum fugit facere odit. Officiis adipisci aut accusantium adipisci aut totam. Aspernatur sit autem ab reiciendis laudantium magni eius. Temporibus optio suscipit temporibus. Eligendi voluptatibus quod praesentium reiciendis a perferendis. Pariatur sed perferendis animi. Culpa minima quia ipsam animi numquam itaque. Voluptatibus inventore consequuntur eos. Deserunt porro et perferendis maiores nobis autem quos. Soluta corporis voluptatibus sequi explicabo. Quia fuga veniam aliquid ea. Eius exercitationem optio eos asperiores ex.

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