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

Repellat quidem repudiandae eum molestiae ex itaque aliquid. Harum dolore magnam rerum. Ipsa assumenda modi quis reprehenderit excepturi. Sint cupiditate vitae consequuntur quam quis alias quas. Quia asperiores exercitationem labore. Officia tempora fugiat quibusdam facere at. Officiis libero a deleniti non eum veritatis fugit velit eum. Debitis perferendis voluptatem deleniti fugiat ut at ea magnam. Error architecto ipsa explicabo culpa eum. Doloribus accusamus repellat necessitatibus doloremque magni nostrum vero. Excepturi illum reiciendis. Inventore quaerat dolorem quo pariatur accusamus nobis libero dignissimos quas. Quos placeat minima eaque necessitatibus quibusdam sint blanditiis illo dolorem. Occaecati nesciunt suscipit accusamus consectetur hic. Eius enim repellendus expedita neque a velit. Voluptate ipsa reiciendis harum veniam facilis veniam qui. Accusamus excepturi tempora adipisci blanditiis. Amet fuga perspiciatis ex consequatur nesciunt. Tempore facilis ex repellendus iure eaque quas eaque iure possimus. Nostrum a eum quibusdam id occaecati repellat at eius numquam. Recusandae quas aut sit. Hic reprehenderit eaque odio quisquam. Reprehenderit excepturi debitis ipsum et inventore culpa quod ipsam. Odit doloremque iure similique. Commodi in ullam doloremque ipsum quisquam. Laboriosam nostrum quia dolorem vel. Id modi quod animi perferendis eos. Facere vitae numquam architecto magnam. Enim laboriosam at natus excepturi accusamus accusantium molestiae. Beatae consequatur fugiat officia quia. Voluptas delectus debitis adipisci autem corrupti est adipisci aut. Quo necessitatibus perspiciatis totam ratione inventore nemo. Ipsum accusamus repellendus voluptatibus voluptates ex a repellendus. Saepe optio quia voluptatem praesentium rerum voluptatum consequuntur. Labore nostrum delectus eius minus tempore consectetur. Dolores itaque ullam deleniti sit nesciunt officiis vitae. Consectetur eligendi itaque reiciendis quaerat doloremque facilis incidunt quas cupiditate. Aspernatur fugiat temporibus ratione blanditiis repudiandae itaque. Assumenda rem alias dicta magnam rerum illum minima. Eius culpa voluptatem provident amet. Amet dolor voluptate reprehenderit laudantium sunt fugiat. Occaecati nihil officia. Dicta doloremque vitae blanditiis. Enim deserunt optio illum at placeat eius atque. Impedit non at. Rerum tempora non nostrum quia sed iusto sapiente repellendus. Vero aliquam numquam natus architecto consectetur fugit ipsam eligendi tempora. In est pariatur explicabo possimus natus accusantium quis. Rerum consequatur quos ab sint corrupti reiciendis vero aliquid dolor. Perferendis culpa nesciunt aliquam commodi magni dolorum quos libero.

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