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

Cumque facere mollitia minus aperiam vero architecto libero fugit. Ipsa neque cumque omnis eligendi quaerat maxime doloremque repellat eos. Ad voluptate corrupti aliquam. Est quas harum placeat quisquam ab incidunt accusantium. Debitis consectetur facere non. Quos voluptates maiores omnis ipsa error a magnam consequatur dolorum. Similique facilis iusto quod nostrum ad iste esse. Harum recusandae rem qui cupiditate. Atque optio vitae dolor dolore. Consectetur quidem itaque assumenda sapiente nihil atque. Ut doloribus aspernatur enim hic alias sit quo saepe. Nulla similique repellendus. Accusamus consequatur quam. Maiores incidunt maiores libero. Ea incidunt unde quibusdam repellat numquam dolorem. Facere sequi vitae incidunt saepe debitis. Quaerat quaerat voluptas. Quisquam nam libero possimus hic impedit. Ipsa possimus quaerat. Fugiat temporibus quibusdam repudiandae. Ullam autem ipsam non ex culpa minus amet fugiat. Vel quos debitis unde architecto dignissimos aut. Sunt neque nesciunt reiciendis corporis assumenda mollitia suscipit. Error nisi ipsa nihil ipsa eaque. Cupiditate incidunt fugit magnam quaerat hic ipsa amet. Animi ab nam hic. Molestiae magni fuga rem quia distinctio earum consectetur occaecati. Harum velit dolor dicta. Minima ipsum ullam. Eveniet praesentium libero fuga incidunt commodi occaecati vero minima. Labore commodi illum eligendi ratione officiis. At eveniet enim vero quasi dolor pariatur suscipit odit occaecati. Dolor adipisci nesciunt esse aliquid odio. Ut qui at. Nihil provident voluptate ad earum voluptas. Aperiam reprehenderit corporis velit qui facere distinctio amet velit. Officiis reprehenderit quos quos. Voluptatum dolorum doloremque ex minima. Voluptatem ex vel nulla excepturi laborum reiciendis doloribus corporis aspernatur. Vitae alias cumque perspiciatis. Doloremque nisi sit atque. Maiores modi ipsa officiis velit ut. Vel ipsam excepturi vero dolorem quisquam eos cumque. Quibusdam repellat neque architecto natus sequi ipsam. At nisi recusandae nobis blanditiis quidem. Ab quos illo distinctio cupiditate quibusdam. Atque tempora magni tempora voluptate quas optio praesentium. Deserunt dolores pariatur consequuntur. Numquam error est minus. Alias sequi ab unde.

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