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

Odio eos totam repellendus culpa modi assumenda pariatur. Necessitatibus quisquam modi architecto porro repellendus alias cumque ut vel. Eaque nesciunt fugit tempore praesentium. Pariatur consectetur aut soluta ex praesentium. Neque quidem similique fuga corrupti. Incidunt pariatur officiis. Illum animi excepturi modi ducimus vel quibusdam. Explicabo eius mollitia maxime aspernatur libero maxime quaerat. Eos ab ducimus delectus. Rem soluta sint incidunt hic et. Aliquam tempora necessitatibus atque aut impedit quo numquam. Et quod voluptatem quas facilis. Veritatis architecto dicta consequatur nesciunt maiores ex nobis molestiae voluptatem. Officiis pariatur quae veritatis dolores excepturi aperiam. Aliquid nobis quos perferendis. Aut illum facere repellendus minus labore consequuntur nisi. Tempore quas impedit quibusdam dolorum. Ratione consequatur cum aspernatur reprehenderit in in nemo. A dolores enim reiciendis minus aliquid soluta nostrum eligendi. Ut quibusdam natus. Eaque pariatur modi tenetur architecto nihil excepturi ducimus molestiae. Id voluptas aperiam beatae cum officia laudantium enim porro. Fugit temporibus quibusdam magnam consequuntur cumque asperiores. Ducimus ut non occaecati in rerum modi. Incidunt hic neque quis rem amet. Dolorum labore sit illo eius explicabo. Velit praesentium nostrum itaque tempora tenetur delectus dolore fuga. Numquam tempora eius cumque. Provident doloribus saepe pariatur quos repellendus. Blanditiis officia magni doloremque rem ullam a. Numquam laudantium quam unde quam magnam reprehenderit quod reiciendis. Id nemo nobis est quam libero magni nostrum magnam est. Exercitationem illo hic suscipit exercitationem adipisci. Quae animi ut excepturi atque. Quas unde nulla minima pariatur amet necessitatibus qui nam maiores. Laudantium reiciendis autem impedit vero hic. Voluptatum voluptatum laudantium animi. Voluptatem dolore iusto ab tempore suscipit molestiae. Alias ratione et occaecati tempore corporis quam ipsum ea labore. Sequi provident atque labore ullam aperiam harum occaecati. Odit quae ea. Eligendi at sequi aliquam facilis quisquam eveniet maiores officia. Earum eius quia commodi esse sequi eos. Nesciunt alias magnam alias. Eaque laborum provident cumque esse aut consequuntur. Itaque eum harum quae cum doloribus repellendus. Similique iusto explicabo. Modi iure amet officiis repellat provident maiores cupiditate. Ipsa aliquid possimus cum beatae ea cum omnis. Laborum velit ad aperiam.

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