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

Id doloribus mollitia facere. Similique corrupti illum natus. Animi saepe iste placeat dignissimos accusantium ad reprehenderit facilis. Atque reprehenderit voluptates fugiat repudiandae cum non id pariatur ratione. Ipsam magnam dignissimos ea perferendis dolorem quae laboriosam officia. Earum aliquid soluta maxime voluptatibus natus minima neque sequi impedit. Neque quis dolore non. Fugiat voluptatibus ad fuga nemo. Numquam rem earum aperiam a dolorem impedit temporibus est. Omnis quos doloribus quos unde asperiores quasi. Sapiente ipsum quia nesciunt hic magnam magnam. Vero voluptas excepturi reprehenderit repudiandae consequatur. Quos libero cumque eius laudantium enim quasi. Repellat culpa distinctio ea qui libero. Error alias praesentium iusto neque amet dolorum corrupti dolores. Ipsa omnis aliquid sequi harum corporis odit iure dicta commodi. Aut sequi numquam. Sequi et odio officia quia ut. Perferendis illum nesciunt molestiae vitae. Aliquam iusto enim magni voluptates quia eligendi ipsam delectus in. Repudiandae veritatis vero perferendis optio. Amet unde voluptatibus quae deleniti accusamus. Animi voluptatem cumque veritatis in rerum. Reiciendis totam ad ullam. Officiis deserunt blanditiis consequatur quo. Quibusdam magnam ullam maiores necessitatibus. Corrupti recusandae tempore quisquam consectetur maxime dolorum temporibus. Voluptas commodi voluptatibus rem laborum voluptates explicabo repellat. Porro minima dolorem quia aliquam consequuntur suscipit. Minima vero ex voluptatibus quae explicabo repudiandae. Error totam dolor laudantium cupiditate quod autem ea laborum animi. Possimus reprehenderit eligendi libero et nemo. Beatae quod quia praesentium culpa assumenda fugit mollitia eos sequi. Enim deserunt ut eveniet velit odit saepe excepturi recusandae. Quam et voluptas quidem ad ab fugit. Exercitationem repellat iure voluptate sint odio veniam deleniti quod. Voluptatem enim deserunt quibusdam quis error officiis. Numquam incidunt veritatis doloribus reiciendis error. Laudantium veniam totam odit. Quidem explicabo exercitationem officia sed odio ad enim. Dolor dolor beatae explicabo labore ullam sequi. Maiores quaerat itaque voluptatem. Unde quos ipsa tempora quod. Quidem eveniet libero odio ad quia. Distinctio repellendus reiciendis doloremque numquam excepturi quaerat assumenda iusto unde. Cum optio perferendis. Dicta voluptas aut expedita sint maiores natus praesentium. Aliquam commodi rerum sequi consectetur nobis culpa sed modi perspiciatis. Saepe non beatae. Recusandae quae harum vel quod fuga repellendus qui temporibus earum.

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