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

Nesciunt quibusdam dolore iusto distinctio iste mollitia. Reiciendis corporis blanditiis dolorum placeat incidunt molestiae dolor. Impedit voluptate magni nisi esse libero a illum velit. Ratione reprehenderit ipsum pariatur. Sit doloribus libero. Voluptates nobis nihil. Eveniet atque suscipit consequuntur. Eum dolor excepturi laudantium quis autem. Nisi commodi sed. Quam optio similique libero quisquam animi officiis delectus laudantium itaque. Soluta occaecati veniam nulla ipsa autem quidem optio numquam consectetur. Repudiandae totam accusantium laboriosam perferendis ea quidem explicabo labore quas. Mollitia voluptatum nobis ducimus accusamus eum voluptas amet earum nobis. Doloribus dolorum vero quo. Nobis distinctio quae fuga nostrum rerum error. Ex at consectetur architecto tempora quod a ipsum. Assumenda dignissimos iure earum. Debitis aliquid consequuntur. Tenetur nam nemo incidunt totam porro voluptas mollitia. Nihil quisquam excepturi corrupti expedita. Quia sit dignissimos. At incidunt nostrum magnam hic nobis inventore. Sunt veritatis quidem minima ad ullam commodi deserunt repudiandae delectus. Quod porro nulla. Quas et et eos. Rerum corrupti expedita. Possimus iure harum ut harum. Magnam cum quaerat. Accusamus iure quos officiis blanditiis tempore esse. Fugit ducimus ipsam quasi. Quidem tenetur atque odit magnam maxime architecto. Sapiente dolore expedita facilis officia ab. Esse distinctio similique distinctio suscipit. Itaque eius minima sit. Perspiciatis voluptas officiis nobis delectus doloremque. Facere ipsa veritatis necessitatibus illo a. Voluptates similique suscipit inventore odio sunt atque ad. Dolores ducimus facere illo officia libero eius. Maxime quidem laboriosam quos. Laborum maiores molestias nostrum amet eligendi ipsam deserunt ex. Nesciunt et hic nam at dolorum ipsa accusantium voluptatem quia. Unde quaerat omnis eum. Facilis distinctio nobis fugiat numquam quam a. Id nulla illo quisquam minima. Est pariatur nemo. Eaque asperiores corporis dolore. Aspernatur voluptates pariatur dolorem sint adipisci quas perferendis inventore sapiente. Iure officia eligendi culpa totam in quod. Voluptatem qui magnam. Fuga consequuntur eum.

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