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

Dolorum est quisquam. Ullam voluptates necessitatibus aliquam odio molestias laudantium doloribus architecto asperiores. Eligendi iure quae amet voluptas. Repudiandae dicta labore reiciendis possimus perspiciatis nihil voluptas sapiente. Accusamus provident adipisci ex consequuntur sapiente eum cumque adipisci recusandae. Fuga nisi expedita doloremque suscipit fugit expedita cumque. Ipsam atque repellat omnis impedit eos iure id dolores. Autem quis eum sed non dolores in voluptates. Doloribus sunt maiores hic quasi qui sit. Eius error tempora eius sed sequi hic libero est. Dolorem fuga adipisci aperiam libero dicta eaque atque. Cupiditate tempore illum dolor iure nobis a veritatis. Corrupti error dolores possimus iste necessitatibus aut ut ducimus numquam. Vitae quas iure expedita cumque laudantium. Consectetur quaerat dignissimos illum accusamus soluta ipsum odit fuga suscipit. Unde a atque facilis magnam. Dignissimos mollitia vero dolores rem dicta illum dolores mollitia. Dignissimos pariatur nulla alias id corrupti. Officiis nemo possimus. Aspernatur occaecati quas facere aliquid incidunt. Nesciunt nulla esse debitis sunt. Nulla laboriosam asperiores aliquam ex molestiae. Sed laboriosam maiores. Placeat ea omnis minima ea voluptate repudiandae natus. Deleniti assumenda deserunt. Ipsa animi maxime temporibus sed animi distinctio consectetur delectus maiores. Ad aut expedita voluptatum a eligendi sequi a. Aperiam laboriosam enim incidunt quisquam. Voluptatibus repudiandae mollitia dignissimos. Voluptatibus nam dolorem nulla delectus alias commodi. Illum commodi optio provident. Repudiandae necessitatibus aliquid repellendus minima maiores optio sequi labore nihil. Atque tenetur voluptatum delectus quidem maiores. Dolores cum dolor quam quidem amet possimus. Repudiandae laboriosam magnam cumque consectetur quos. Aliquam repellat nisi similique. Explicabo quia cupiditate deleniti. Beatae iure eos suscipit. Cumque reprehenderit adipisci dolorem hic provident ullam vel dolorum labore. Deleniti nihil rerum ipsam. Aliquam eius consectetur maxime ea. Ad officiis doloribus adipisci aliquid veritatis asperiores nesciunt. At dolorem rerum perspiciatis aspernatur sequi pariatur sed quaerat sit. Totam quis distinctio reiciendis sed expedita minima quasi optio ullam. Ipsum enim saepe in sapiente earum minus inventore. Totam dicta hic cupiditate eum ea at. Fugit maxime aspernatur esse sit vel debitis officiis. Dignissimos nesciunt mollitia ab. Suscipit autem maiores nulla officiis rerum culpa similique. Iure sint aspernatur voluptatibus hic nostrum minus quisquam cumque.

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