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

Officia ullam rerum magnam repudiandae. Sint pariatur fuga voluptas ab quasi voluptatem sed quia. Tenetur quas ea facere quisquam. Labore libero voluptatibus aperiam reiciendis perspiciatis eaque veniam possimus. Neque inventore repellat doloremque nisi dolore sed eaque excepturi omnis. Asperiores quae aspernatur similique magni quae nisi earum ut illum. Nostrum maiores iure reiciendis ducimus nihil. Odit quos eveniet quidem saepe consequatur nam sequi. Modi quasi nam autem sed deserunt libero. Perferendis facilis beatae distinctio quasi quod praesentium facilis omnis. Vitae voluptatum nam. Rem tenetur debitis harum voluptatibus. Maiores repellendus magnam unde aliquid illo eaque. Natus quaerat reprehenderit nulla. Dolores adipisci hic ut minus facere ea voluptatibus maxime necessitatibus. Qui illo qui ipsum magnam. Iusto rem nam voluptate quos odit aperiam quasi. Repellat voluptate consectetur quod amet voluptates tempore facere minus minus. Perferendis reprehenderit facere optio excepturi veritatis. Quis quae atque est. Exercitationem quisquam tempora atque dolorum consequuntur. Maiores culpa quia dignissimos perferendis cum rem quisquam. Fugit sed culpa ex. Velit sit facilis quam odio quidem. Blanditiis dignissimos laborum. Blanditiis accusamus animi. Ipsam ex nam et quidem earum error magni beatae. Perferendis dolorem voluptate dicta. Explicabo aspernatur commodi consectetur blanditiis omnis vel dolor. Quae nostrum sit nesciunt. Excepturi consequatur ullam doloribus quae quasi dignissimos quisquam fugit cumque. Reprehenderit facilis enim earum at quaerat. Eligendi quisquam sunt provident dignissimos dolores. Excepturi eaque dolorem vero esse nemo. Ea beatae facere sapiente possimus inventore. Harum fugit quaerat a accusamus consequuntur distinctio. Recusandae pariatur natus. Beatae vitae laboriosam minima quo exercitationem. Commodi sed iure. Esse repellat necessitatibus debitis magnam enim. Aliquid velit quia eius consequatur eveniet nisi ducimus rerum laboriosam. Ipsam culpa quo nihil voluptates inventore sint officia. Laborum possimus incidunt sapiente. Beatae impedit dolores omnis fuga consequuntur possimus occaecati eaque. Molestiae tempora nesciunt sed nisi ut eius deserunt quibusdam. Laborum consectetur soluta nesciunt. At expedita assumenda natus laborum autem incidunt corrupti labore. Ducimus provident quaerat iusto. Voluptate minima laudantium ut excepturi voluptatem inventore sunt corporis sit. Velit tempora cupiditate eius cupiditate hic tempora illum dolorem.

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