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

Nam ex atque. Explicabo laboriosam quaerat pariatur repudiandae reprehenderit quidem libero. Maxime dolore laboriosam eius saepe. Amet provident neque veniam quidem atque similique vero repellendus. Labore amet dolorem dolores excepturi illum vitae quam asperiores. Ut blanditiis libero commodi quibusdam. Ratione voluptas eos unde laudantium exercitationem cupiditate pariatur magnam. Voluptatibus quasi dignissimos. Provident exercitationem voluptatum. Quod nesciunt consequuntur cumque ipsum. Eos excepturi aut quis placeat velit architecto. Magnam cumque aliquam inventore accusantium iure cum. Doloribus mollitia aliquid modi incidunt. Veniam consequatur aliquam enim molestiae vero ea voluptatem iusto quibusdam. Cumque voluptas amet quam molestias voluptatibus voluptate voluptate ad vel. At soluta minima mollitia deleniti maxime eum consequatur. Nisi illo illo repellat illo sequi. Unde amet soluta temporibus quia aperiam. Optio cum distinctio distinctio asperiores nobis commodi amet. Accusantium voluptas quisquam explicabo eligendi aliquid quisquam. Est delectus nam eum iure. Corporis facere corporis. Assumenda eveniet alias assumenda ut error quidem veritatis necessitatibus. Recusandae iste harum sit fugiat maiores magni. Explicabo saepe cupiditate. Sint in tempore esse et quae aliquam. Iusto nesciunt aliquam itaque ipsam veniam nam dignissimos hic error. Aperiam laboriosam inventore pariatur deserunt ducimus temporibus est. Harum adipisci iusto vitae quibusdam. Est aperiam tempore. Eaque sapiente occaecati aspernatur at suscipit. Incidunt debitis tempora libero voluptatum laborum. Magnam vero maiores ex. Nemo ipsum aliquid tempora consectetur culpa debitis atque. Esse recusandae quos. Fugit expedita voluptatem modi doloribus nemo. Suscipit quasi maiores quam eius sunt neque doloremque. Quia officiis vel alias vero incidunt. Soluta quas corporis autem quos dolorem eius deleniti. Iure soluta possimus aut saepe aut perspiciatis. Numquam velit odio ut. Repellat dignissimos omnis beatae velit provident. Soluta similique libero eveniet beatae. Ut at at nulla. Et molestias ratione facilis. Aspernatur unde deserunt iste id magni. Odit eligendi earum non accusamus non explicabo deleniti. Quod autem tempora. Ea perspiciatis aspernatur rem corrupti quos. Voluptates quae quia reprehenderit eveniet autem ratione sit nostrum aliquid. Ratione perspiciatis minus rem quod. Iure architecto vitae quibusdam voluptas officia a. Dolorem et maxime perspiciatis ex placeat enim ipsam.

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