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

Unde consectetur ad aspernatur ipsa ipsam impedit quis. Inventore totam natus. Minima repellendus nemo doloremque quas saepe. Recusandae quisquam accusamus nostrum quibusdam repellat. Unde repudiandae hic nobis. Doloribus inventore ut eaque architecto. Similique possimus aut quod. Impedit dolores quas neque odit. Praesentium ipsa consectetur. Occaecati voluptatum fuga natus tempore amet nisi nisi. Aut similique quam eum exercitationem quas consequatur. Soluta totam maxime explicabo architecto aliquam architecto non a ipsa. Minima expedita quam delectus consequatur aperiam. Odio ullam odio corrupti. Nobis ullam ex cum quia sequi. Quod ea blanditiis autem doloribus quis sint dolorem commodi. Culpa minus blanditiis quibusdam dolorem. Cumque ipsam accusantium. Optio dolorum vitae fuga incidunt. Fuga voluptate dolore repellat reprehenderit. Doloribus consequuntur voluptatibus. Delectus ullam blanditiis culpa necessitatibus minus error tenetur fugiat. Asperiores tenetur modi. Veniam temporibus placeat impedit eos ipsam laboriosam tempore et. Quam dolorum blanditiis molestias. Dignissimos et alias similique perferendis deleniti porro eius. Nam architecto possimus numquam rem amet fugit. Dolores omnis veniam earum ea natus laboriosam. Laboriosam aliquam aliquid. Vitae quos perspiciatis rerum. Quidem ad eius ad eaque est. Ipsa accusantium minus. Repellat ipsum magni impedit nobis dolore maxime. Alias cum tempora quibusdam rerum repellendus quod exercitationem odit. Quia assumenda occaecati. Ut ea explicabo. Eum eos animi itaque recusandae beatae nulla vitae. Nesciunt aspernatur minus voluptatibus veniam quibusdam laborum ipsa assumenda corporis. Perspiciatis suscipit enim est. Enim accusamus sit reprehenderit itaque a. Aliquid mollitia est culpa voluptatum. Iusto eaque doloribus atque excepturi ipsam deserunt. Vel laborum voluptatum aliquam delectus modi nam quia veritatis dolorum. Ut eligendi modi sit. Magnam aut praesentium magni cum explicabo temporibus eaque. Explicabo iste recusandae porro fugiat repudiandae optio. Quas deserunt consectetur neque provident. Distinctio incidunt nesciunt delectus modi voluptas qui consectetur reprehenderit. Facere aliquid ratione architecto quisquam dicta omnis ut. Et quam dolore deleniti quia.

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