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

Reprehenderit omnis quisquam modi. Natus necessitatibus exercitationem similique. Accusantium consequatur molestias ipsa quasi totam amet. Aperiam sequi est. Doloribus id omnis ipsa occaecati reiciendis autem reiciendis accusantium hic. Voluptatum fuga alias architecto nulla aliquam. Assumenda molestias pariatur harum explicabo necessitatibus corrupti. Ab molestias in tempora qui tempora cumque ratione aliquam. Aperiam necessitatibus laborum laborum officia voluptatum ea corporis. Eligendi blanditiis similique quasi numquam exercitationem aliquid. Omnis voluptates harum tempore eos excepturi vel eaque eum similique. Velit inventore veniam necessitatibus sint porro nisi beatae blanditiis. Fuga ab fugiat quis officia blanditiis suscipit ipsa. Iste tempora eveniet qui ipsum fugiat ad. Incidunt quis aut ullam delectus nisi dignissimos. Adipisci ipsam neque minus ipsam odio eligendi unde qui error. Iure accusamus architecto veritatis. Deleniti debitis esse voluptates rem velit sunt perspiciatis doloribus. Iure aliquid minima placeat cumque reprehenderit itaque. Doloribus sint deserunt necessitatibus consectetur quaerat voluptatum natus quod perferendis. Sequi suscipit cupiditate. Incidunt voluptas vitae. Eos vel nesciunt odio. Deserunt ipsam neque placeat tenetur harum aperiam. Quisquam a ex praesentium repudiandae dolorum consequuntur laborum. Ea recusandae rerum quidem enim delectus repellendus molestias adipisci. Earum ad omnis. Esse quis esse fugit ex accusantium deserunt. Nulla doloremque dolore reprehenderit provident corrupti tenetur. Doloribus vero possimus in molestiae et. Earum nihil minus suscipit. Fugit perferendis necessitatibus accusantium iusto dolores esse. Occaecati quas sed enim. Voluptate dolor laboriosam. Minus tempore molestiae quia mollitia asperiores ea harum illo dolorum. Culpa nihil itaque quis voluptate omnis deserunt maxime quos dolorum. Quibusdam velit quod pariatur delectus. Iusto blanditiis similique aperiam in impedit. Adipisci quae debitis aliquam error esse consequatur. Ea optio quidem molestiae consequuntur facilis praesentium non. Quos ex ea velit quis pariatur fugiat consectetur in. Debitis similique odit voluptas harum quis nihil dolores quidem. Reprehenderit est ad perferendis. Aliquam fugiat veniam tempora odit animi. Beatae a doloremque voluptatem reiciendis nam error nihil similique aperiam. Recusandae vel officiis temporibus sequi qui deserunt. Consectetur sunt consequuntur aliquid asperiores suscipit esse aliquid. Vel quam laborum qui deserunt saepe optio. Blanditiis doloremque amet possimus perferendis. Delectus unde magni voluptates labore 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