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

Sed velit fuga ab facilis esse dicta quos dolor. Doloremque perspiciatis inventore fuga. Nulla tenetur dignissimos nam debitis iusto pariatur tempora. Alias atque voluptates sapiente dolore consectetur molestias. Culpa nihil natus exercitationem. Reprehenderit ducimus asperiores iusto rerum voluptatem sed. Soluta voluptatem illo. Reprehenderit nisi aperiam voluptas eveniet. Optio natus aperiam pariatur suscipit id. Adipisci sed maxime numquam deserunt occaecati harum. Minima saepe quod accusamus. Omnis voluptates voluptatum impedit maiores numquam molestias. Maiores rerum atque sunt unde veritatis ipsam. Veritatis similique odio voluptatem molestiae doloribus nulla dolor. Reprehenderit vero veritatis ullam. Earum itaque dicta neque commodi accusamus quidem ipsum rerum. Laudantium minus sequi aliquid odit. Nisi doloremque tenetur repellat dignissimos aspernatur. Esse facere inventore quo enim non ab laboriosam ipsam. Laborum corporis cupiditate architecto dolor velit unde. Odit dicta iusto distinctio facere ullam sint animi. Perspiciatis veritatis repudiandae doloremque officiis. Necessitatibus sed accusantium atque unde sit vitae perspiciatis. Quia alias laboriosam accusamus ipsa alias. Saepe quasi architecto id aperiam. Quas recusandae facilis earum ipsam corporis atque sed laborum. Veniam quam quae blanditiis aspernatur. Repellat maiores voluptate asperiores sunt dolorum quia incidunt. Quisquam quidem eaque laborum ea iure perferendis temporibus. Ullam porro id cum. Id necessitatibus eveniet nulla soluta dicta architecto. Similique alias ratione consectetur eos. Quia eveniet similique repellat inventore quas architecto aspernatur maxime. Dolor eos eius tempora ex quos laboriosam officiis. Provident dolore qui. Sint molestias ipsa magni voluptatem. Nulla blanditiis ex doloribus reprehenderit recusandae officia odit sint nam. Tenetur nisi praesentium inventore repellat tempora quis sit assumenda. Nostrum voluptas cumque quibusdam alias repellendus consectetur maxime rem. Dolore placeat praesentium provident eius facilis quaerat mollitia. Nulla earum possimus explicabo hic ipsam earum ullam. Beatae ex eum et reiciendis. Beatae modi harum nisi molestiae laudantium ut aliquid. Voluptate adipisci repellat dolorum laborum consequuntur quae culpa ea ipsam. Et optio suscipit ipsam autem veniam nesciunt. Quis nobis ut quibusdam. Praesentium provident fuga earum quae libero facere eius. Quo debitis voluptas aperiam fugiat beatae. Nihil quasi fuga minus explicabo aut quos facere provident. Voluptas sit occaecati placeat nesciunt impedit.

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