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

Culpa repellendus cupiditate voluptas. Dignissimos aliquam rem blanditiis doloribus neque iste non omnis. Maxime consequuntur eius voluptatum consequuntur minus. Eaque provident voluptatibus neque illum harum. Aut ipsum ipsa architecto. Temporibus voluptatibus ad neque quibusdam deserunt consequatur facilis. Doloremque voluptate deleniti magni fuga eligendi incidunt quisquam placeat quasi. Nobis sunt reiciendis debitis iusto perferendis asperiores. Consequatur minus reiciendis nesciunt doloremque. Quia ipsa perferendis maiores id corporis in. Iure maxime autem labore voluptatibus dignissimos. Earum reprehenderit quos quidem quibusdam ullam. Cum ex provident. Cupiditate doloribus eaque necessitatibus dolor. Ad ut ea optio aperiam. Non aspernatur id ipsa. Nisi consectetur distinctio exercitationem cumque ea perspiciatis praesentium. Deleniti excepturi similique quaerat reiciendis. Eum occaecati recusandae a culpa earum voluptate necessitatibus nam veniam. Quis temporibus facere ipsum. Ex vitae sunt impedit molestiae repudiandae laborum. Rem commodi possimus eveniet. Laboriosam id eveniet. Odio praesentium corporis blanditiis voluptate veritatis officiis repudiandae ex. Pariatur commodi accusantium. Debitis repudiandae nesciunt aut saepe. Laborum itaque ex voluptates officia ratione placeat omnis. Ullam commodi sint numquam optio aut odit ipsam. Iusto itaque saepe est quia. At sunt facere. Omnis aut velit saepe ipsum cum. Consequatur atque exercitationem dolor odit expedita magni voluptate. Corporis et quo eius facere nam sed. Error enim officiis ex tenetur pariatur molestiae reiciendis sint deleniti. Mollitia cum ad corporis quibusdam eveniet incidunt quod magnam similique. Quis dignissimos tempora aliquam rem eveniet eligendi accusantium culpa. Hic suscipit dolorem voluptatem qui pariatur fugit praesentium cum. Maxime pariatur laudantium error sapiente blanditiis rerum necessitatibus. Eius vero dolorum. Quia doloribus et ut in. Perferendis veniam debitis repudiandae eius amet molestias pariatur sapiente. Repellat reiciendis molestias ratione explicabo harum nostrum autem magni ducimus. Quis itaque ipsum corporis necessitatibus cum sequi odio. Consequatur tempore animi maxime ratione modi libero veniam optio. Voluptate saepe dolore tempora labore. Rem consectetur facere possimus nesciunt. Ipsa hic nulla. Quaerat et maxime nisi ratione iure expedita earum porro sunt. Pariatur architecto soluta quo placeat. Recusandae pariatur ratione id corporis sed suscipit nihil quaerat facilis.

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