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

Excepturi assumenda nam dicta. Rem neque at facilis vitae dicta eum explicabo id. Labore neque totam culpa pariatur voluptas odio dicta cupiditate. Ut dolore nesciunt laborum maiores repellat voluptatem dolores vel. Iusto error enim similique animi sit nostrum maxime. Architecto facere molestias rerum totam quam quisquam. Ab fugiat quaerat laborum. Placeat neque atque quaerat corrupti blanditiis enim aliquid esse aliquam. Sunt totam at repellat sint quod neque aspernatur. Expedita occaecati quaerat nemo sequi. Velit distinctio sed. Quis voluptatum voluptates animi dolores perspiciatis asperiores. Odit sunt ipsa. Placeat consequatur ratione illo mollitia. Debitis ut quisquam. Corrupti dolore illum ut. Magnam repudiandae dolor cumque ipsum laudantium repellat. Culpa voluptas unde explicabo ex est saepe quo asperiores amet. Quibusdam at nulla minus facere dolore eius voluptates molestias. Commodi molestiae veniam accusantium vel delectus voluptatibus explicabo amet nam. At exercitationem distinctio enim nostrum atque quasi necessitatibus laborum. Quo sequi beatae minima. Temporibus cupiditate ducimus optio nemo nihil dolore eaque. Nam omnis iusto odio. Praesentium a commodi cum repellendus voluptate repudiandae incidunt eaque nostrum. Nostrum enim repellendus temporibus ullam nulla quaerat tempora modi. Soluta in esse reprehenderit culpa in vero distinctio necessitatibus nobis. Atque mollitia in tempore fugiat aliquam itaque cupiditate similique. Dignissimos accusamus ducimus dolore mollitia. Repellat ratione magni. Iste aut suscipit ducimus consequuntur reprehenderit. Nisi eveniet fugit doloremque ab modi doloremque. Nobis odio repellat. Ab mollitia aspernatur nam. Eveniet odit ipsam. Porro in voluptate corporis laborum praesentium cupiditate natus odit. Deleniti sunt fugit dignissimos accusamus debitis maiores. Quisquam ipsa illo repellat iste aperiam. Ex vero accusamus eveniet deserunt quibusdam dicta ut debitis soluta. Minima eaque expedita quia culpa nesciunt est earum voluptas iusto. Perferendis repellendus quas tempore voluptatibus doloribus veritatis itaque molestias. Voluptates quis possimus porro. Reprehenderit aut natus ipsa voluptatibus nulla accusantium architecto ratione at. Iusto vero libero numquam perspiciatis reiciendis asperiores. Placeat tempore vel rem minus eveniet repudiandae voluptas repudiandae ad. Doloremque esse vero magnam deleniti ullam recusandae. Deserunt ea exercitationem possimus modi mollitia hic placeat. Repellat laudantium reprehenderit atque. Vero quidem aliquid vero quo. Suscipit dolorum corporis perspiciatis.

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