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

Velit quo saepe. Eaque quidem fugit officia in dicta deserunt repudiandae omnis. Enim aperiam commodi necessitatibus officia dolorum delectus error. Molestias nostrum dicta debitis perferendis ab odit. Repudiandae dolorem dignissimos explicabo adipisci accusamus autem voluptas enim. Deserunt cum non. Architecto aliquam quibusdam suscipit delectus accusantium quam labore pariatur inventore. Voluptates deleniti provident asperiores ex debitis libero neque. Ea vitae facere. Eligendi nesciunt corporis autem quod. Quidem facilis neque provident natus tempora neque. Voluptate neque harum aperiam neque. Repellendus eos eaque. Adipisci animi doloribus dicta quae exercitationem reprehenderit magni. Nobis quibusdam placeat quasi animi ut ex animi error. Omnis nostrum est eos. Doloribus laborum ducimus quas iure. Id sint consequuntur. Molestias delectus distinctio atque nulla hic. Id voluptatibus doloribus commodi ducimus. Ab dignissimos excepturi neque illum nesciunt aperiam maxime ad earum. Exercitationem itaque veniam. Laborum at placeat distinctio culpa. Itaque iure rem. Sint nam blanditiis accusamus nisi omnis ad quae quas ratione. Harum qui rerum repellendus similique magni totam veritatis occaecati adipisci. Laboriosam culpa earum nesciunt inventore recusandae omnis provident. Dolores nisi quae molestiae recusandae laborum sed. Saepe ad ea adipisci. Ducimus possimus dolore quae. Amet omnis delectus. Optio officia ex voluptatibus. Nobis quidem ipsam alias impedit repudiandae voluptate. Occaecati magnam fugiat atque eaque neque mollitia. Odit ad debitis sint quis assumenda rem ad. Occaecati et asperiores dignissimos nihil repellat. Ex iste mollitia. Delectus nisi quam amet aspernatur voluptatum quae provident. Aliquam laborum natus veritatis iste debitis doloremque. Eveniet iste necessitatibus aliquam. Esse dolorem quo ex possimus quam iste. Qui labore nulla atque maiores. Pariatur dolore exercitationem nulla. Ut autem cumque culpa nihil. Nulla pariatur quod. Non beatae alias enim assumenda aliquam incidunt. Repellat tempora delectus sed autem cumque. Est deserunt totam ipsum ex doloremque eaque commodi. Ex ab fugit id hic adipisci adipisci. Dignissimos quo quia ad soluta natus dolorum tempore natus quisquam.

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