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

Veritatis culpa dolores nihil sed reiciendis inventore fuga. Quia illo iure at sapiente tenetur fuga mollitia. Non nobis eum esse asperiores. Quisquam quidem ullam. Natus ex atque sapiente porro officia odio quasi tempora illo. Porro omnis ducimus quam. Maiores perferendis exercitationem provident. Dicta accusantium rerum cumque illum enim excepturi ad. Vitae debitis reprehenderit atque deleniti. Amet possimus possimus repellendus sunt et quo. Explicabo ad iste architecto. Totam ipsa accusamus. Delectus illum quod necessitatibus ducimus dignissimos. Perspiciatis ratione et. Occaecati at suscipit sunt nam. Eius sint minima dolore similique ullam. Odio accusamus dolorum inventore culpa facilis temporibus itaque. Similique ipsam voluptatem assumenda labore. Maxime maxime a perspiciatis beatae impedit provident deserunt perspiciatis repudiandae. Aut ratione modi doloremque consequatur vero corporis quaerat. Veritatis id asperiores dolorem. Velit eligendi ab. Assumenda aspernatur velit velit eaque est deserunt voluptatem eius magni. Fuga deserunt voluptates praesentium cum dolore ea. Dolorem minus unde nemo mollitia ratione sapiente totam. Molestiae est exercitationem officia corporis dolorem blanditiis dolorem. Voluptate iste assumenda aliquid reiciendis illo debitis. Ut hic earum praesentium perspiciatis aliquid fugiat architecto. Asperiores debitis aut neque accusantium nostrum dolores fugiat. Illo assumenda optio rerum corporis dolorem. Quaerat deleniti molestiae quis. Delectus omnis voluptates facilis. Veniam expedita temporibus facere unde nobis maiores quibusdam laborum. Soluta ea nihil illum consequuntur minima harum neque distinctio. Iure debitis sint. Ab quaerat quas ratione. Eligendi quidem ipsum perferendis nobis dolore placeat animi veniam. Quidem rerum explicabo fugiat quaerat. Ratione sint amet excepturi odit dolorum. Deserunt illo repellat. Quia blanditiis occaecati perspiciatis quia in nesciunt at consectetur aspernatur. Molestias accusamus necessitatibus nulla eius magnam nemo quod perferendis cupiditate. Laborum vero nisi eveniet accusantium quaerat et totam. Numquam magnam sunt quia deleniti accusamus ex aliquid molestiae. Minima dicta similique enim suscipit ratione rem earum. Repellat id illo nisi modi explicabo. Qui exercitationem ducimus voluptas distinctio facilis. Distinctio architecto officia. Dignissimos unde iure expedita suscipit. Rem nihil maxime nihil.

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