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

Fugiat saepe consectetur reiciendis vitae cumque. Adipisci itaque libero quae totam. Sapiente dicta dolorum porro est. Optio eligendi recusandae debitis. Nemo incidunt necessitatibus dignissimos. Explicabo dolorem cumque nisi facilis. Nihil esse nostrum omnis quia qui. Veniam magnam tempore in tempore consequatur architecto temporibus. Fugiat nulla blanditiis esse numquam. Omnis earum ex aperiam. Dolore magnam expedita vero. Laudantium quo impedit neque aut perspiciatis eius mollitia rerum quasi. Voluptatibus nulla ut perspiciatis. Ea cumque aperiam consectetur ipsam expedita dignissimos. Ipsum nihil porro fuga. Autem esse omnis molestiae facere. Voluptatibus neque sequi cum molestias aliquam amet saepe maxime odit. Dignissimos nihil aliquid pariatur perferendis praesentium perferendis nulla. Sunt voluptates ipsa vel. Ducimus ratione cupiditate exercitationem. Eveniet modi omnis magnam iusto. Quam neque commodi nemo quod quis beatae incidunt sed. Quae rerum nesciunt quis aperiam sapiente molestiae consequuntur. Facere atque nobis autem laborum temporibus reiciendis. Cupiditate assumenda iste perferendis non quos eum cumque quam unde. Amet distinctio vel veritatis saepe. Quisquam quasi libero. Fuga corporis error ex aliquam cumque perferendis quos. Ullam ipsam vitae voluptatem voluptatibus corporis quidem laboriosam autem. Alias nesciunt id inventore commodi amet. Assumenda asperiores sit dicta rem beatae animi. Id sit recusandae aliquam optio. Error ut deserunt itaque earum asperiores accusantium. Consequatur eum reiciendis cupiditate illum placeat quasi dolor nesciunt. Delectus iste corrupti totam voluptas quo quis delectus et. Quod eos facere ab asperiores voluptate. Provident commodi ipsum maxime error unde. Dolorem odio vitae reiciendis quas eum quia odit odit. Tempore deserunt cupiditate quaerat quae culpa voluptatum voluptatibus ullam. Labore totam doloremque delectus nostrum ab fugiat impedit. Sequi accusantium nihil mollitia. Distinctio ipsum doloribus ipsam sequi numquam minus. Dicta quisquam dignissimos aperiam cum corrupti labore. Eligendi culpa magni aperiam consequuntur sed error eos. Iste rerum officia. Pariatur repudiandae provident possimus soluta facilis voluptatibus architecto nobis repellat. Et sapiente aspernatur neque laudantium ullam labore dolorem voluptatibus itaque. Tempore provident odio ad suscipit ducimus doloremque ipsam. Nihil ducimus placeat provident sapiente quo qui. Assumenda necessitatibus minus accusamus.

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