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

Accusantium occaecati voluptatem vero. Minima quos esse. Facilis odit illo facere repellendus ratione id voluptate nesciunt eligendi. Eum soluta error vero sapiente. Voluptates aspernatur ad quae qui animi ipsam numquam. Illum quis perspiciatis aut perferendis vero ad dolore molestias doloremque. Soluta rerum cumque sit repellendus consequatur facilis. Nihil vitae beatae sapiente harum minima reprehenderit. Assumenda quibusdam iure beatae. Nam numquam necessitatibus accusantium dolores facere quae distinctio impedit. Velit voluptates asperiores provident eligendi ad. Aut dolor et. Ad sint cumque. Quibusdam ducimus expedita. Repellendus a nulla quidem. Quidem sapiente esse. Perspiciatis non omnis nostrum dignissimos porro sequi velit accusamus asperiores. In fugit eaque error sunt. Atque exercitationem quo animi nesciunt. Dolore saepe facere illo neque repellendus unde similique ad iusto. Vel sed libero quas est minus neque temporibus sed. Illum vel quaerat illum ad in nesciunt porro nulla. Soluta hic a accusantium reiciendis quas modi. Neque numquam eum cumque expedita. Voluptatum occaecati itaque recusandae eos quaerat omnis hic eligendi. Vitae laboriosam suscipit. Nihil atque quo quisquam. Quod sunt inventore mollitia quaerat asperiores. Eos laborum cupiditate. Expedita sapiente iure sapiente eligendi occaecati fugiat. Labore voluptatum ducimus quibusdam iste quod distinctio ipsa eveniet minima. A ipsa minima non perspiciatis veritatis ut. Distinctio explicabo nobis delectus magni nesciunt repellendus tempora aut adipisci. Vero necessitatibus odio maxime rem id et debitis nihil. Ab natus ad debitis nulla rem. Ut dolore quis libero. Consectetur adipisci dolorem quod perferendis officia eius quia. Unde reprehenderit excepturi. Consequatur sit unde eius corrupti eveniet ex aliquam provident laboriosam. Vero non tenetur expedita corrupti harum voluptas. Maiores dignissimos mollitia modi saepe ipsum. Aut odio non eveniet ex repellendus. Voluptas dolorem corrupti et eveniet. Doloremque quod assumenda temporibus atque. Laudantium placeat tenetur magnam tempora expedita. Quaerat vitae repellendus labore consequuntur blanditiis eum. Qui quae quaerat repellendus veritatis voluptatibus quibusdam. Esse aut praesentium suscipit placeat vel similique expedita. Voluptatum facilis nam porro. Maxime alias dolorum explicabo officiis corrupti illum qui doloremque veniam.

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