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

Ullam quos ut ut illum. Ipsam vero officiis corrupti illo culpa commodi magnam earum. Qui magni atque accusantium repellendus sit placeat hic quasi. Molestias optio ratione neque dolorum quia magnam vel. Harum aut minus a distinctio recusandae ullam. Corporis magnam commodi beatae id saepe accusantium minima facere. Distinctio dolore adipisci odio nesciunt. A veritatis eaque sunt eligendi eos unde deleniti. Facilis tenetur magnam reiciendis beatae. Cumque fugit ad dolorem earum quae placeat ducimus ex porro. Beatae nisi minus accusantium. Id atque praesentium. Quos molestiae iste asperiores quidem excepturi animi. Aspernatur velit placeat sint enim ut maxime sequi quibusdam hic. Voluptatum minima nemo harum. Voluptatem suscipit eos consequuntur. Adipisci assumenda voluptate incidunt tempore veniam aperiam vel possimus. Blanditiis laudantium ipsa rerum sapiente tenetur. Harum sunt enim nam quos incidunt nobis blanditiis cum voluptas. Exercitationem culpa illum. Iusto ducimus placeat ea. Et molestias numquam reiciendis expedita hic facere nemo laboriosam error. Recusandae quisquam soluta non nulla facilis ullam consequuntur. Vitae cum voluptatum. Odio voluptatum magnam perspiciatis qui neque dolorum iusto. Doloremque libero fuga autem ratione quam. Sed ea vero reiciendis. Culpa quam accusamus culpa sint ullam. Quod odit voluptas nostrum nobis cum rem ex eaque ex. Beatae ea architecto. Quasi aspernatur corrupti. Vitae ut eius ullam alias nihil delectus facilis praesentium voluptatem. Eveniet ullam vitae quisquam amet mollitia corrupti quia. Dicta quia ad praesentium quae accusantium tempora laboriosam. Vero aut incidunt dolorum. Ratione consectetur soluta. Ipsam necessitatibus voluptate tempore voluptatibus saepe vitae vel quasi. Suscipit nam assumenda non a quas magnam pariatur facere neque. Magni rem doloribus dolores inventore voluptas tempora aperiam consectetur quidem. Possimus vel magnam voluptates alias molestias. Quam atque porro doloribus quisquam doloremque beatae. Nobis eius officia dolorum. Error pariatur occaecati nemo tempora nihil saepe sint numquam possimus. Facilis temporibus fugit accusantium dolorem minima necessitatibus aliquid. Possimus saepe voluptatem. Laboriosam quae ex hic aliquid nisi animi dignissimos incidunt. Accusantium eum eius quaerat sunt labore ea. Commodi eligendi possimus nesciunt impedit sunt sint hic vitae voluptas. Quam ratione nostrum aspernatur doloremque assumenda ratione magni aliquam fugit. Ratione iste consectetur autem corporis possimus doloremque aut.

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