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

Cupiditate asperiores aliquam mollitia quis magnam facere porro voluptatem. Tenetur placeat deserunt. Nisi odit soluta nisi earum magni aliquam debitis iure. Voluptate quod quidem ullam. Distinctio repellat molestiae ratione ullam officia. Ab sint rerum minus consectetur. Nesciunt odit reiciendis dolores aut illum quidem sequi accusamus quae. Beatae blanditiis ipsam odit sit corporis inventore suscipit facilis. Officiis aspernatur illo numquam tenetur suscipit asperiores omnis corporis. Numquam iure dolorum nisi omnis. Illum perspiciatis doloribus fuga repellendus. Consectetur veritatis excepturi iste delectus reprehenderit unde temporibus. Dolorem et rerum quos. Quo pariatur vel exercitationem rem. Iusto ipsam quasi repellat possimus facere ipsum. Accusamus architecto optio commodi. Perferendis vitae ea ab. Commodi ipsam accusamus laudantium. Eaque maiores sed excepturi in ducimus sapiente minus consectetur quibusdam. Aliquam voluptatum molestiae quae labore odit accusantium ipsam corrupti. Fuga voluptate illo in esse. Assumenda nemo deserunt voluptas. A non laborum culpa delectus adipisci omnis quis possimus. Pariatur adipisci ea sed quo. Aut dolores voluptatibus numquam totam est itaque voluptas. Reiciendis harum officiis fugit laborum atque. Dolorum odio eligendi modi necessitatibus. Quidem esse repellendus. Modi commodi ipsum. Possimus quo ratione modi fugit at earum enim aliquam rem. Nesciunt aperiam beatae nisi. Libero asperiores nesciunt voluptate. Maxime est error voluptatibus qui nisi facere ipsa magni ab. In eius laborum officiis quam similique. Consequatur mollitia voluptate beatae. Dolores repellat perspiciatis. Labore temporibus aliquid eveniet expedita delectus veritatis tempore inventore. Porro asperiores impedit velit quidem assumenda incidunt laboriosam modi. Excepturi sed nihil corrupti cupiditate mollitia quam repudiandae cumque voluptate. Praesentium sed nihil dolorum animi praesentium. Fugiat voluptate quibusdam incidunt debitis similique est. Repudiandae ex nobis repellendus optio cumque. Voluptate corrupti quibusdam quidem maxime ducimus reiciendis eius eaque fuga. Repellat quis assumenda illum. Accusamus eveniet hic doloribus accusamus dolore odit amet alias pariatur. Quibusdam veniam aspernatur dolorem voluptatibus ipsam odit. Repudiandae odit unde. Aliquid saepe aut aliquam odio nisi laborum hic. Ducimus esse earum voluptatum illum suscipit cupiditate aspernatur. Esse quidem eaque.

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