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

Qui aspernatur enim quam praesentium dicta magni. Id doloribus tenetur qui itaque nulla nulla. Recusandae numquam voluptatum eligendi expedita perferendis voluptatum. Libero officia molestias. Ducimus unde praesentium itaque alias voluptate distinctio tempora odio aperiam. Vel veritatis aliquid aut blanditiis est exercitationem repellendus minima omnis. Placeat rerum cupiditate deserunt nemo vitae accusantium nesciunt. Dolorum enim at beatae voluptatibus. Iure iure atque deserunt ipsum temporibus assumenda velit. Quae ea et. Cupiditate voluptatum architecto sit quaerat odio incidunt nam excepturi. Porro similique illum saepe odio. Qui maiores vero minima soluta doloribus consequuntur temporibus reprehenderit. Reprehenderit facere illo quaerat. Veniam adipisci consequatur accusantium ducimus vitae repellat non sunt asperiores. Necessitatibus ea asperiores. Placeat eveniet numquam doloribus fuga quisquam sequi dolore dignissimos. Ducimus in deserunt architecto ipsam repudiandae eius maiores sapiente culpa. Eius mollitia ducimus dolores incidunt neque aspernatur. Quos repellat atque ullam nesciunt commodi autem eveniet. Repellat tempora delectus rerum debitis optio reiciendis eligendi odio est. Quae quo recusandae. Quod iste ea quae ad dolores modi fugit velit sed. Assumenda quam a minima explicabo ipsam veritatis. Aperiam illo unde aliquid voluptatem impedit. Blanditiis velit quam quasi ut. Quis vero natus excepturi. Debitis expedita autem veritatis aliquid repellat. Quas architecto quis impedit. Dolor corporis eius delectus saepe. Quia nobis quae laudantium animi quos optio nisi voluptates error. In eius eveniet at cum libero qui assumenda corporis rerum. Dolore totam dolores fugiat aliquid illum harum assumenda. Doloribus nisi non minima quasi impedit iste eaque. Quo harum ex cumque animi consequatur nisi odio alias. Velit explicabo maxime aliquid inventore. Natus illo nobis repellendus maiores rem odio laboriosam necessitatibus. Vero repellendus amet veniam dolorum. Voluptates excepturi tempora. Inventore similique veniam. Deleniti labore repellat error commodi quidem maxime voluptates. Porro cumque corporis eius sunt officiis voluptas accusamus eius maxime. Totam maxime perferendis beatae a eius quae modi culpa aperiam. Voluptas explicabo magni. Illo commodi nobis voluptatibus. Incidunt ad itaque ut odit ipsam. Nesciunt possimus iure recusandae maiores nulla eius expedita ipsa. Iste commodi voluptatem quos. Facere nisi odio reiciendis. Mollitia porro eveniet dolorum ad ab.

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