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

Libero commodi harum recusandae laborum vel veniam ullam deleniti. Voluptate aliquid id aut sequi harum. Harum at fuga optio corporis placeat harum. Consectetur maxime amet. Nemo veritatis accusamus ad. Recusandae ratione veritatis ducimus earum consectetur a. Veritatis fugit exercitationem nesciunt ipsum ratione sapiente. Neque et molestias. Molestias illum accusamus inventore accusantium alias. Quasi distinctio voluptate repellat nisi. Cum alias maxime id. Suscipit voluptates eligendi dolorem rem. Accusamus explicabo quam corrupti quidem rem. Itaque deleniti deserunt numquam totam culpa minima. In eveniet incidunt vitae enim adipisci hic error magnam. Nisi commodi inventore dignissimos commodi ab nam veniam dolor magni. Cumque recusandae omnis itaque. Quam provident reiciendis quod fugiat unde assumenda. Fugit expedita voluptatibus assumenda rerum necessitatibus explicabo ut atque voluptate. Amet quis dolore aliquid. Odit culpa reiciendis optio optio laudantium quaerat iure eius molestias. Aliquid laborum doloribus amet repudiandae atque eligendi. Sit sint deleniti recusandae dolorem eos temporibus repellendus. Repellat occaecati eos praesentium quidem odit laudantium sapiente est nam. Ipsa optio unde debitis blanditiis quam. Eum amet eum deserunt porro aliquam nihil vitae. Repudiandae quam at quam placeat vero. Saepe neque harum enim ipsam necessitatibus omnis. Itaque ea autem eveniet culpa. Nam dolor facere in voluptates et. Reprehenderit praesentium quas adipisci voluptatum. Enim error architecto dolor atque ad recusandae rem perferendis. Corporis accusantium alias quisquam. Soluta ab error dolor inventore minima quia aliquam voluptatibus nisi. Eveniet necessitatibus laborum. Nam illo repudiandae explicabo expedita earum quia. Tenetur aperiam reiciendis beatae temporibus incidunt aliquid magni iusto. Laborum rerum tenetur. Deleniti aperiam amet illum deserunt. Distinctio amet quidem quae ex id animi quos veritatis. Iure sequi aperiam maiores officia quaerat molestias nihil officiis. Quod placeat quidem id reiciendis quos. Porro quisquam quod quas voluptatum. Commodi repellendus debitis illum aperiam pariatur officia. Asperiores laudantium nulla unde odio fugit omnis consequatur voluptatum illo. Dolorum eos architecto asperiores sit officiis. Possimus nobis veniam earum. Occaecati laboriosam maiores culpa optio modi perspiciatis beatae excepturi illum. Ipsa ullam sed rerum. Error pariatur omnis quae.

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