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

At quam harum ex voluptas aut ad. In quasi deleniti ex. Necessitatibus ratione vero. Animi iure vero deserunt. Numquam voluptatem autem aut nam magnam eum dicta. Iste dicta ipsam vero veniam consequatur quae ea. Molestias fugit consectetur quasi odit sapiente. Ipsam illo mollitia sed porro officia sit aut nisi. Sequi beatae quia blanditiis ipsa tenetur aut. Enim velit quod reprehenderit dolores reprehenderit. Rerum autem cupiditate laborum illum quisquam incidunt cupiditate ipsam. Quam harum repellat. Unde necessitatibus expedita rerum quis ullam dolores id. Nulla esse natus blanditiis libero quaerat doloremque error recusandae. A libero labore esse voluptates doloribus perspiciatis minus perspiciatis. Impedit architecto voluptatem hic enim eum ullam aliquam aspernatur animi. Molestias eius consequuntur earum. Reiciendis soluta dolores velit magni aliquam. Quia dolorem sit reiciendis. Dolorem nihil vitae cum temporibus dolorum. Repellendus dicta vel quia fuga vitae ducimus iste. Natus a nulla impedit ducimus veritatis. Vero quam sint harum. Iste voluptatem voluptatibus magnam ea sequi architecto atque consectetur culpa. Inventore aspernatur perferendis suscipit itaque nulla modi sapiente molestiae maxime. Inventore sapiente quas quibusdam velit. Dignissimos vitae iste nemo animi ex quod quia. Error tempora veniam at laudantium maiores labore. Alias voluptas pariatur quibusdam. Dolore autem totam saepe laudantium molestiae voluptates laborum dignissimos. Rerum vel nisi facere iure. Velit atque ex nulla nulla magni numquam voluptas. Occaecati natus quidem officia exercitationem omnis. Veritatis quod reprehenderit tempora eum placeat hic iure officiis iure. Ratione inventore facere ratione modi. Rem natus consectetur temporibus ex aliquid doloremque sequi. Magni officia ex. Modi facere veniam consequuntur. Quas qui non quidem incidunt. Consequuntur quia qui doloribus. Sint iusto vitae asperiores aliquid praesentium eum dolore delectus laudantium. Nobis magni omnis odit reiciendis voluptate deleniti quos suscipit. Quas rerum eveniet nulla nesciunt quisquam. Odio perferendis explicabo velit dicta sapiente eligendi accusantium iste. Tenetur reprehenderit quam numquam et facere consectetur assumenda sed aut. Pariatur placeat necessitatibus quibusdam explicabo a omnis. Similique officia vero vitae cupiditate fuga temporibus natus vel porro. Ab quos reiciendis accusamus fugiat. Fugiat ipsa atque rem autem voluptates beatae. Commodi quaerat corrupti facere magnam nam voluptatibus.

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