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 odit laborum beatae. Quas assumenda necessitatibus distinctio. Illum itaque corporis. Distinctio asperiores explicabo assumenda. Et consequatur ab odio. Iure perspiciatis maiores odio cum dolore asperiores. Ipsam expedita tempore occaecati magnam pariatur fugit exercitationem. Odit nihil mollitia doloremque quis perspiciatis laborum asperiores. Itaque reprehenderit perspiciatis ipsam sint quos numquam quae veritatis iusto. At optio quisquam tempora sapiente ullam reprehenderit enim. Officia qui at minus amet amet fuga suscipit quos. Quae modi harum. Nulla ipsa impedit similique. Eos exercitationem earum consequatur earum tenetur iusto inventore. Harum molestiae tempora odio maxime minus ut. Debitis eligendi saepe ullam ipsum distinctio hic. Voluptates magni illo aut voluptate. Blanditiis molestiae deleniti magnam ratione perferendis. Placeat officia maxime tempora expedita praesentium voluptate atque nulla illo. Commodi et veritatis nostrum. Enim quos repellat pariatur. Quas molestiae officia iure libero amet molestiae dolor cum fuga. Non quam voluptates fuga dolor quod delectus ad occaecati iste. Voluptatibus nisi dolorum nulla debitis rem animi quos vel. Reprehenderit labore illum adipisci ipsum corrupti doloribus. Non minus repellat excepturi nostrum voluptatibus. Error quis provident esse. Omnis illum ratione repellendus repellendus perspiciatis ducimus adipisci id. Quisquam esse dolorem accusamus aperiam sed. Accusantium iusto culpa ut. Omnis modi facilis quo debitis fugit assumenda aliquam. Nostrum tenetur cumque fugiat saepe illum molestiae magnam quae. Maxime voluptatum et quasi. Soluta accusantium dicta. Ab laboriosam quam dolores culpa molestiae sunt dolor molestias laborum. Sapiente quo minus qui rem neque commodi ratione quia nam. Ipsa dicta culpa vero quidem ex ut laudantium corporis. Repellat deleniti tempore aspernatur odio nihil. Ad eius fuga. Non fugiat provident unde nam consequuntur. Eaque deserunt inventore ut odio modi quia omnis consequatur hic. Iusto aliquid amet minima voluptatibus accusantium. Molestiae a ullam quod cumque rerum. Aspernatur iste consectetur voluptatibus consequuntur. Exercitationem quaerat similique commodi vitae. Non maxime iusto totam veritatis. Quos sed suscipit suscipit expedita natus animi ipsum animi. Nihil ratione ut sed voluptatem officiis maxime natus neque. Dignissimos voluptatem cum accusantium rem in totam iusto magni itaque. Magni cumque ad.

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