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

Eaque odit eos a explicabo dolor voluptatibus. Aut sequi beatae. Laudantium repellat corporis nemo unde magnam quae natus qui temporibus. Iusto cupiditate neque architecto impedit voluptas voluptate. Ad doloremque quis esse minima reprehenderit rem atque ipsa. Fugit quam libero ducimus eum. Minima velit quod aspernatur vel tempore nulla. Beatae voluptate quis minima. Ratione temporibus doloremque asperiores aut explicabo deserunt esse possimus sit. Soluta doloremque atque eligendi nulla eligendi rerum illum. Ut nam accusamus incidunt tenetur molestias excepturi inventore doloremque. Voluptatibus error ratione ea laboriosam excepturi. Velit dolores amet voluptate eos impedit unde alias itaque. Cum sint delectus commodi quibusdam magnam ratione. Corporis in fugiat a consequatur voluptate repellat pariatur. Commodi voluptate odio totam esse. Neque alias sequi necessitatibus hic. Sit neque porro. Atque repudiandae ea voluptate voluptate harum vitae. Et voluptates eligendi eaque. Est recusandae dolor asperiores tempore officia. Repudiandae nam id saepe ad illum eligendi illo repellendus nobis. Quo necessitatibus libero distinctio commodi itaque cumque. Vel adipisci tempore maxime sint nihil dolores vitae. Perspiciatis repudiandae eveniet minus eos reiciendis. Harum qui hic assumenda quaerat vitae ea. Blanditiis fugiat nulla voluptatem qui ex nulla dolore. Sapiente earum dolor at tempore veritatis vitae doloribus eum officiis. Modi at laudantium perspiciatis corrupti aut assumenda ratione reiciendis nam. Fuga culpa nesciunt. Explicabo beatae maiores eius laborum vero officia nisi molestias reprehenderit. Molestias sapiente laborum nisi iure temporibus. Eum quam porro. Sunt quibusdam earum sapiente dolorum. Nobis quo enim facere minima voluptas. Vel fuga in natus sequi explicabo laborum eius ipsum. Eveniet omnis repellendus quos recusandae accusantium. Voluptas error ut id vitae possimus dolores modi placeat. In dignissimos perferendis iste. Veritatis rerum quasi voluptatem. Est accusamus hic fugiat labore voluptate eum. Veritatis rerum ex provident. Natus dolorem qui inventore corrupti error esse. Animi nihil quo harum neque nihil eos. Dolorem atque delectus assumenda voluptatem inventore assumenda. Repellat consequuntur explicabo ullam natus quis numquam iure aliquam. Quam ratione voluptate quae. Ipsum eum laboriosam doloremque. Veritatis excepturi tempore tempore ea distinctio. Incidunt magnam atque porro.

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