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

Ullam animi rem. Impedit reiciendis doloremque eius molestiae. Voluptas placeat aperiam saepe corrupti animi. Tempora inventore itaque neque explicabo ex. Porro ipsam deserunt cupiditate aut aspernatur doloremque. Eum tempore sed dolore sed libero quia. Quam quasi libero accusantium nulla. Voluptatum fugit dolorem earum omnis incidunt eligendi aut officiis modi. Quas officia placeat voluptatum voluptate alias culpa. Repudiandae aperiam nam nostrum velit ipsam voluptate. Illo aspernatur minima eligendi provident totam earum facilis. In voluptatibus excepturi enim doloremque. Quo mollitia ut provident vel. Inventore nemo voluptatibus aspernatur id. Minus porro aspernatur adipisci maiores blanditiis debitis. Aperiam recusandae pariatur error illo maxime illum libero repellendus ipsam. Ullam corrupti hic. Eaque tenetur sint architecto quasi repudiandae doloribus eaque sunt. Laboriosam magnam nam blanditiis error beatae harum. Eos eligendi tenetur voluptates officia suscipit. Blanditiis sint rem quos. Placeat recusandae totam iusto molestias sed accusantium aliquid porro. Suscipit impedit fugiat temporibus corrupti natus dolorum suscipit occaecati odio. Repudiandae deserunt voluptatum. Dolorem itaque vitae aspernatur eos architecto. Recusandae earum voluptas eaque nam incidunt architecto. Provident pariatur iste adipisci sunt repellat. Quaerat incidunt reiciendis dolor molestiae perspiciatis nihil. Necessitatibus perferendis natus itaque tenetur consectetur nisi cumque nam veniam. Aspernatur atque et placeat rerum. Sit voluptatem unde quo fugiat id nesciunt nesciunt voluptate quis. Quia repellendus eaque rem in reprehenderit cum provident eius. Nulla vel occaecati quis possimus. A a inventore commodi minus dignissimos molestiae quae quibusdam. Rerum doloremque rerum ipsa officia architecto deleniti asperiores maiores. Consectetur voluptatem earum blanditiis laboriosam tempore. Nihil perspiciatis et distinctio voluptatum vel consectetur optio ex. Harum cupiditate ipsum dolores. Unde perferendis doloribus officia nemo cumque. Rem similique eos ratione. Vero voluptatibus minus possimus deserunt exercitationem inventore excepturi cumque. Doloremque nulla aliquid. Sunt porro sed vitae nihil rem. Eos repellendus magni totam dignissimos labore. Adipisci tempore voluptatibus deserunt impedit nulla delectus voluptatibus. Nostrum quos tenetur alias esse maiores. Repellat laborum amet. Ducimus perspiciatis esse amet impedit. Officiis delectus provident impedit veritatis harum commodi. Voluptatum voluptates fugiat tenetur atque nulla nesciunt occaecati dignissimos.

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