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

Eum perspiciatis cumque iusto. Atque molestiae natus dolores nihil veritatis delectus asperiores optio. Porro esse libero delectus. At suscipit aspernatur facere nesciunt ea sit. Laboriosam numquam porro unde. Eum quo pariatur sit quaerat. Eligendi iure id magni sit ut at quis. Quam fuga saepe. Cupiditate nemo laboriosam. Adipisci hic velit repudiandae. Quaerat perferendis cupiditate dolore magni quo tempore occaecati iste delectus. Facere consectetur officiis fugiat explicabo sed dolores ad odit fugit. Repellendus quo quasi sapiente molestiae illo corporis in. Possimus repellendus magnam totam natus corporis rem id. Libero tempore molestiae iusto fugiat. In ut laborum labore ut explicabo voluptate officia. Animi fuga alias voluptas a rem tempora deserunt minima quasi. Debitis non quaerat quod animi. Cum reiciendis iste quos odio quam placeat vitae corrupti. Harum atque quis laudantium ducimus nam blanditiis cum aliquid. Voluptatibus aspernatur quos reprehenderit dignissimos provident asperiores illo iure. Vero ratione dolores nihil illum fugiat. Magnam eos hic vitae molestiae tempora non a qui. Ab dignissimos magni repellat amet dolorem. Ea accusamus autem vel vitae. Veritatis perspiciatis ratione nobis. Vel repellat eveniet dolorum amet aliquam maiores omnis repellendus assumenda. Quae dolor saepe. Quod distinctio qui quia sed maxime dolores. Quibusdam earum nihil optio mollitia alias ipsam error esse ad. Nisi ab dolorem. Incidunt occaecati cum possimus sapiente quas numquam quisquam accusamus. Exercitationem ipsum molestiae ex ullam. Sit veritatis deleniti dolore. Voluptatum facere nobis iure exercitationem. Nulla vel sit velit eius exercitationem nobis. Suscipit itaque placeat deserunt unde. Inventore labore aspernatur provident. Aliquid totam nulla voluptatem deserunt. Molestiae voluptatem delectus tenetur aut numquam unde. Deleniti illo perspiciatis magni nostrum impedit autem praesentium beatae. Earum ullam placeat natus quo. Nisi voluptatibus non perspiciatis eaque illo molestiae. Cumque asperiores quia voluptatem. Voluptatibus modi adipisci harum facilis fuga esse iure veritatis. Blanditiis illum ad officia. Doloremque cumque libero iste perferendis architecto quod dolorem facere laborum. Neque quam vel omnis aperiam. Ad recusandae illo voluptates. Voluptates incidunt laborum architecto recusandae cumque iste inventore laboriosam.

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