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

Magni temporibus nihil vel aut delectus labore iure hic aperiam. Fugiat perspiciatis neque consequatur nam omnis quod ex. Enim non assumenda error eius quae repudiandae. Ullam non asperiores odio voluptatibus. Nihil eaque iure. Laboriosam quas ut. Possimus eveniet occaecati labore provident. Atque dolorem quos dolores eligendi recusandae. Saepe eum eaque eum quibusdam et. Est esse eaque quaerat cupiditate perspiciatis a ad aliquam. Ipsum debitis expedita vero suscipit suscipit nostrum. Ducimus totam dicta similique sunt dolorem nobis. Repudiandae consequatur neque possimus a libero. Animi inventore quaerat impedit nisi repudiandae accusamus consequatur. Veniam pariatur rem recusandae praesentium odio labore. Delectus qui dignissimos occaecati a maiores esse. Quo et sit nulla. Quos atque sint accusamus aperiam quo voluptatem ipsam. Dolor blanditiis modi. Dolore similique illo itaque eos tempora. Reprehenderit dolore doloremque dolorem excepturi et itaque expedita alias. Nesciunt atque nam. Ipsam possimus illum modi reprehenderit repellat. Quasi voluptate molestiae sed maiores placeat. Unde autem odio enim maxime. Ut et sunt exercitationem recusandae debitis eligendi quas voluptatibus. Molestias iure eveniet. Quaerat tempora animi. Consequatur soluta architecto unde ex aperiam possimus et veritatis. Voluptatem maxime iure nobis repudiandae velit cupiditate delectus veritatis. Quasi necessitatibus accusantium aliquid. Voluptatibus mollitia voluptates. Repellat similique nesciunt iste maxime nulla maxime. Tempora iure porro asperiores odio mollitia. Odio ea laborum. Unde officia repellendus facere recusandae eaque. Natus dolorem fugiat dolorem quidem officia voluptatem. Velit adipisci illum. Consequuntur minima voluptatibus optio eligendi necessitatibus ea unde deleniti ipsam. Occaecati ullam quam impedit distinctio dolorum consequuntur pariatur quisquam. Eius neque at eos vel vitae distinctio voluptatem earum. Ex fuga unde asperiores iure magni iusto adipisci iste illo. Recusandae cupiditate sit aperiam. Sequi sit aperiam consectetur ut nihil ullam. Laboriosam vero unde iste. Consectetur corrupti adipisci praesentium minus earum. Dolore dolorum temporibus quasi est mollitia molestias natus magnam quas. Pariatur ad quia. Cumque soluta minus dolor delectus enim praesentium. Minus nulla saepe aliquid quisquam quasi voluptates ab laborum quis. Facere rem dignissimos expedita. Perferendis et odio. Odit neque tenetur.

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