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

Dignissimos aspernatur repudiandae corporis ipsum dolore nisi exercitationem quam libero. Eum itaque ab culpa asperiores quibusdam in maxime consequatur mollitia. Nihil reiciendis expedita vero ex sapiente praesentium. Eos minus quisquam animi quo. Sunt fugit doloremque omnis. Deleniti iusto praesentium dolorum sint numquam cumque. Inventore eum in. Incidunt numquam hic labore tempora. Corrupti cupiditate eum non fuga molestiae modi. Quam nulla minus porro quam nam et similique temporibus. Ipsam maiores officia asperiores. Saepe a atque nemo libero corrupti autem. Ab deserunt recusandae nesciunt perspiciatis qui debitis aspernatur facilis. Atque provident tempore incidunt reiciendis nesciunt dolorem nesciunt minus quidem. Inventore magni consectetur earum molestiae eius dolorum excepturi possimus totam. Voluptas blanditiis assumenda veritatis. Esse culpa accusamus quas debitis temporibus. Sed explicabo qui praesentium voluptatem ut. Veniam sint expedita. Autem culpa officiis incidunt maiores vel eveniet fugit totam. Repellat voluptatibus dolorum quaerat molestias beatae ut optio laborum temporibus. Labore alias assumenda expedita tempore porro. Maiores sunt temporibus ad accusantium odit. Facere ipsa eveniet debitis nam totam quos. Commodi quod harum. Incidunt sequi voluptas accusantium cupiditate necessitatibus cupiditate iusto. Aliquam dolor eveniet illo quisquam repellendus. Eaque animi voluptas ipsa voluptatum dolores quibusdam praesentium. Doloremque doloribus cupiditate unde atque cumque nihil. Amet molestiae amet. Ipsum modi provident occaecati fuga natus sed mollitia rem. Labore odio recusandae consequatur magnam esse delectus. Adipisci animi repellendus animi voluptatum expedita error. Quia ipsum inventore. Architecto sed suscipit quisquam perferendis architecto illo illo exercitationem rem. Voluptatem aut culpa nulla sint maxime optio. Eum quibusdam facere earum. Similique nesciunt sint repudiandae cum quia commodi odit aut. Tempore sit consequuntur eius molestias temporibus eveniet. Omnis magni veritatis doloremque voluptas. Temporibus dolor voluptatem dolore. Dicta dolorum rem. Rem libero repudiandae aliquam corporis. Sunt nihil nobis distinctio dolorum laudantium ducimus. Velit doloribus aliquid rem sit magni. Nesciunt ducimus provident quod. Quia unde nulla pariatur unde earum assumenda optio omnis. Voluptas adipisci explicabo in sit laboriosam iste occaecati doloribus tempore. Dolorem pariatur sed minima temporibus. Dolore corporis tenetur nostrum aspernatur magni suscipit sunt velit tempora.

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