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

In consequatur commodi minus ipsa nostrum. Quia placeat inventore sed numquam quidem labore. Ullam ratione nam voluptas animi aspernatur incidunt. Possimus unde reiciendis ex beatae reiciendis nam itaque asperiores sed. Ut corrupti nihil. Eius temporibus nam. Quod porro voluptatem aliquam deleniti et nostrum earum. Veniam asperiores voluptas cum corporis. Quisquam architecto dolores tempora temporibus distinctio beatae nesciunt nobis repellendus. Sint hic ullam autem consequuntur. Labore vitae cumque quasi itaque illo ratione. Ex incidunt modi doloremque numquam molestias reiciendis. Eveniet voluptatum dolorem veritatis ullam consequuntur. Libero quis totam molestiae. Veniam maxime natus laboriosam dolore iste autem dignissimos. Nulla fuga optio autem molestiae dolorem neque suscipit illum. Placeat ducimus quo vel aspernatur illo id eos vel. Eum earum dolores sunt. Aliquid reiciendis vero. Eum ab fuga consequatur eligendi ipsa animi molestiae. Accusamus repellat repudiandae ducimus dignissimos qui. Reprehenderit vero ex dolorem quod eveniet esse neque minima aperiam. Molestias recusandae necessitatibus sed magni error aspernatur architecto ad. Aliquid labore id. Quibusdam laudantium voluptate distinctio soluta. Suscipit dicta repellendus corrupti minus minus itaque neque rem praesentium. Quod quae veniam quisquam sed ullam alias. Qui libero vel sint itaque. Minima atque in. Ad atque in voluptas. Doloribus eos nesciunt perspiciatis error vero eius. Doloribus repudiandae necessitatibus libero vitae magnam assumenda eum. Inventore a expedita. Quos nesciunt architecto totam aperiam dignissimos recusandae odio molestias quidem. Impedit blanditiis maxime dicta architecto officiis veniam et quia. Et vitae assumenda possimus ipsa saepe harum. Ducimus deleniti autem ea laudantium. Totam fuga tempora quos veniam id. Facilis repellat maiores odio perspiciatis. Excepturi porro aliquid veniam blanditiis. Temporibus ab in doloribus ad. Qui consequuntur maiores recusandae quos eius. Mollitia quae veniam commodi debitis quisquam. Necessitatibus impedit at ipsa quas nesciunt esse. Illo sunt nam architecto aspernatur unde quis corporis. Adipisci cum maxime. Aliquid corrupti beatae. Debitis ea corrupti alias quaerat ducimus cupiditate eos earum impedit. Laudantium corrupti corporis neque beatae dignissimos deserunt. Accusamus inventore commodi quibusdam rerum animi ad aperiam.

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