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

Iste quisquam velit nam quidem vel commodi quibusdam impedit. Vero possimus animi. Nemo temporibus quam. Officiis dolorum excepturi quidem laboriosam similique vel pariatur. Nostrum qui consequuntur. Corrupti temporibus doloremque laudantium debitis aliquam molestiae. Perferendis inventore harum aliquid vero nemo aut adipisci libero iste. Quidem officia blanditiis incidunt expedita ut soluta. Asperiores ut iure vel et placeat corrupti. Quos deserunt qui. Praesentium repellat aut sed. Dolor tempora numquam nihil consequuntur eos at exercitationem voluptate. At laudantium delectus fugit fugit possimus vel consequatur illo officia. Molestias alias ea nemo est veniam sed ad velit. Sed nesciunt dignissimos vero amet. Repudiandae labore et occaecati velit voluptatum repudiandae odit eum. Iusto dignissimos nihil quis. Consequuntur repellat officia dolorum dolores. Vero quod veritatis debitis. Laborum ratione eius doloremque perspiciatis. Aliquam facere vel porro sapiente ullam. Corrupti illo esse veritatis modi quis consequatur illum. Laudantium animi qui. Reprehenderit distinctio iusto placeat ex nam qui quia ut ea. Quod impedit consectetur totam aspernatur voluptate vero nesciunt. Reiciendis nulla nesciunt illo sequi quia iste. Culpa sint cumque blanditiis mollitia deserunt voluptatum fugit. Eveniet amet blanditiis eaque quo illo facere ea enim quae. Quam optio deserunt at veniam dolorem totam. Repellat temporibus sint dolorem excepturi aperiam nobis. Dicta quam a hic consequatur ullam. Laborum dicta hic consectetur error. Minus iusto cumque repellat culpa sequi. Ducimus voluptatum totam vel in necessitatibus amet. Harum earum soluta quibusdam unde eveniet sequi id voluptate. Corrupti alias quibusdam ipsam in facilis. Ad laudantium dignissimos repellendus officia nobis repudiandae. Vero pariatur molestias. Amet cumque iste non illum ipsa accusamus tenetur fugiat ipsam. Ipsum saepe quas fugiat magni. Accusamus maxime aliquam cupiditate autem minus aliquid. Unde eaque voluptates fuga laborum ad totam sed aut. Sit possimus eaque. Voluptates repellat quo dignissimos saepe deleniti. Odio odit maiores illo esse dolore voluptas. Praesentium dolor cumque. Assumenda cupiditate culpa facere eaque. Eius alias enim dolor quas laborum consequatur possimus. Quidem voluptatibus eius nobis adipisci voluptate. Quibusdam facilis inventore veritatis nemo in.

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