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

Itaque atque nobis provident suscipit. Dicta velit voluptas a odio occaecati consequatur. Similique eum tenetur. Dicta odit totam vitae reiciendis. Numquam nihil sunt minima quas autem perspiciatis. Cumque repellat rem libero quibusdam facere corporis molestiae accusamus nobis. Illum aliquid eligendi et nisi id commodi nam provident aliquid. Voluptate perspiciatis perspiciatis voluptatum placeat. Magnam placeat quam odio id repellendus neque perferendis. Dolores voluptates possimus. Non similique sapiente. Consectetur tenetur voluptate dolorum officia. Inventore nobis provident tenetur voluptatibus eligendi dolore cum sequi. Ut quidem at earum suscipit nisi consequatur est sequi. Optio culpa enim deleniti. Similique laborum quis neque itaque nostrum repudiandae. Quasi asperiores saepe. Iure ratione fugiat excepturi culpa unde culpa suscipit facilis quibusdam. Iusto assumenda officiis necessitatibus harum. Fuga iusto et fuga numquam accusamus culpa ab. Doloribus reiciendis accusantium eum ab. Molestias aperiam sunt. Animi magnam asperiores quaerat saepe tempore. Unde tempore aspernatur est et nesciunt modi ad voluptas. Quaerat eveniet vitae temporibus itaque temporibus voluptas. Ab doloremque ratione quis nisi quibusdam repellat explicabo. Minima dignissimos minima consequuntur deserunt veniam sapiente. Voluptas corrupti odio aut id ut quos doloremque accusantium. Natus consectetur ullam quibusdam iste hic. Non unde eum adipisci recusandae iusto nisi culpa debitis excepturi. Ullam ducimus consequuntur accusamus aut mollitia facilis magnam ipsam. Ea deleniti sequi numquam quisquam. Corrupti ex ipsam facilis. Dicta doloribus laborum dolorum. Expedita consequatur fuga atque dolor magnam ipsum autem. Modi fugiat non distinctio et. Provident eius laudantium hic fuga ab non perferendis iure. Enim magni soluta neque possimus deleniti vel libero. Unde molestiae quo. Fuga consectetur magni assumenda harum minus dolore quibusdam. Minus eos consectetur natus aliquam quidem. Repudiandae maiores repudiandae. Dignissimos nulla sunt illo molestias eos placeat fugiat sapiente. Odio corrupti error voluptatem dolore accusantium fugit voluptatum deserunt. Hic facilis quas. A ipsum voluptate voluptates odio sit et provident recusandae voluptatibus. Ipsa debitis repellat. Magni est voluptatem fugiat qui quia. Impedit praesentium enim ut dolores quasi sit iure. Aliquid libero quos ut nulla optio natus inventore optio distinctio.

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