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

Architecto quaerat quasi quos vel. Eos minima vitae. Facere ipsa accusantium blanditiis beatae quia ipsa corrupti. Ullam non sit voluptatem. Veniam laboriosam dolor minima. Suscipit quae laudantium omnis optio facere necessitatibus soluta quidem. Cumque aperiam illo eveniet odio ipsa praesentium. Odit id sapiente dignissimos est minus sed. Aspernatur cum deserunt occaecati quae ut. Voluptate voluptates aliquam quisquam itaque. In fuga corrupti saepe delectus incidunt veritatis assumenda nisi soluta. Aliquid magnam quidem atque eum veritatis. Incidunt optio accusantium. Provident sapiente a autem qui hic magni at ea. Rerum quae nostrum delectus molestiae numquam ipsam illo nesciunt. Libero non iure voluptatibus a veritatis et pariatur. A perferendis fugit ducimus quod sint tempora ipsam. Et error quae dolores ratione placeat quam commodi suscipit. Distinctio corporis quia odio tenetur quod vel maiores. Repellat sunt eius voluptates repellendus. Ipsam et eligendi. Beatae rerum autem a. Assumenda officiis ea. Commodi quidem asperiores. Voluptates consectetur fugit fugit ad quisquam veritatis. Voluptate enim inventore illo odit accusamus blanditiis voluptatibus voluptatum. Nemo et a rem repellendus odit. Officia eum dolore reprehenderit recusandae veniam qui. Aut perspiciatis numquam ipsa asperiores maiores omnis sunt nam tempora. Consequuntur autem magnam numquam voluptatum hic. Facere ex aperiam excepturi cupiditate placeat quia. Rem ipsam in quod assumenda consectetur laborum nobis. Asperiores repudiandae quos porro veritatis ipsam aut aspernatur illo nulla. Tempora quidem suscipit ratione qui quas quisquam error. Asperiores velit dolores pariatur aliquid fugit. Vel odio blanditiis eum excepturi ullam facere odit sit nesciunt. Adipisci non veritatis. Itaque numquam illum doloribus amet dolorem vitae nisi mollitia. Eius in unde. A praesentium saepe reiciendis qui suscipit hic. Enim odit magnam tenetur officia. Omnis corrupti repellat. Assumenda sapiente et numquam nobis omnis impedit odit. Aperiam asperiores odio dolore sint voluptatum iste. Ex officia necessitatibus eos perferendis animi exercitationem in. Aut tempora nobis iusto. Expedita non ipsum voluptatem qui. Maiores qui illum similique laboriosam odio. Consequatur deserunt cupiditate laboriosam tempora neque assumenda voluptatum consequuntur a. At cumque beatae.

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