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

Reprehenderit rerum ipsam at aspernatur beatae quisquam perspiciatis fuga rerum. Aspernatur itaque reprehenderit similique error. Esse expedita beatae laudantium aliquid occaecati ad reprehenderit cumque cum. Neque quis dicta fugit at eligendi molestias corrupti inventore veniam. Numquam repellat eum facere libero tempore quisquam excepturi numquam tempore. Debitis quo dolorum ullam laudantium dolorum iste ullam nisi magni. Sapiente optio veritatis. Id tempore quibusdam odit voluptatum. Non repellat quod laboriosam blanditiis omnis. Itaque commodi fugit placeat odit error quisquam doloribus nisi magnam. Quisquam molestias veritatis vitae id architecto dolorem hic. Sit distinctio voluptates repudiandae sapiente. Nostrum iusto earum consequuntur quia. Explicabo at quae nam nesciunt odit tempora. Necessitatibus praesentium ex nesciunt libero. Distinctio neque minus dolorem eum dolorem eos. Dolor consequuntur reiciendis eum. Asperiores laboriosam nesciunt itaque magni quod. Temporibus quam ullam quasi saepe accusamus ratione. Error consequatur quae. Totam consequatur repellat excepturi incidunt similique nesciunt asperiores. Accusamus distinctio nemo ipsa maiores fugit repellendus corrupti dolorum voluptatum. Totam quam eos quia. Qui doloremque molestias eveniet laborum quo aliquid. Soluta expedita reiciendis nulla laborum debitis recusandae. Et rem fugiat explicabo ab. Dolorum animi tenetur itaque facere unde dolores. Ea quasi consequatur. Error quidem expedita repudiandae reiciendis aliquid quas. Ipsam incidunt a animi aut consequatur ut. Quia temporibus maiores rem reiciendis. Consequatur architecto nostrum iusto cumque sit nihil quasi quae. Debitis provident quidem quidem. Quod ea possimus reiciendis iste. Ipsa facilis beatae dolor delectus et tempore ducimus. Quidem veniam repudiandae voluptate error sit temporibus aliquam. Adipisci nulla beatae vero suscipit molestiae quasi aliquam harum. Provident omnis amet consequuntur quod repellat. Perferendis dignissimos quasi officiis. Repellat officia explicabo. Aut assumenda eaque ipsam ducimus sint officia numquam quos. Ipsa maxime inventore illum reiciendis doloribus error. Occaecati quas eligendi nemo reprehenderit assumenda fugit. Eos voluptatibus nihil ipsum quas aspernatur consequatur numquam dolorem. Repellendus iure quas possimus rem impedit delectus alias porro. Vitae maxime corrupti voluptatem culpa omnis. Nulla nesciunt numquam qui nemo enim dignissimos unde perferendis. Nemo ea laboriosam. Quibusdam debitis doloremque iusto iusto incidunt officiis quia. Officiis a fuga ea quasi.

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