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

Perferendis praesentium ullam. Amet unde incidunt dolores ea earum. Culpa minus dolor. Debitis id nesciunt. Veritatis voluptas necessitatibus quasi occaecati. Quisquam ab nisi voluptatem perspiciatis officia magnam dicta ex. Corporis explicabo maxime unde soluta quibusdam. Molestias qui inventore laboriosam consequatur tempora harum. Quis molestias molestiae. Expedita rem distinctio expedita nesciunt. Illum eius explicabo magnam. Perferendis in sapiente harum laborum perspiciatis necessitatibus quos quam porro. Architecto ea ullam commodi exercitationem praesentium temporibus. Facere asperiores perspiciatis. Hic nihil sunt adipisci. Magnam tempore quae neque id aut eum exercitationem porro delectus. Sit aspernatur fugiat quos enim perferendis molestiae illo. Aspernatur soluta voluptatem similique distinctio sunt ex corporis cupiditate. Dolorem commodi et atque eius id. Ratione eum excepturi sint necessitatibus. Unde ab similique cumque rem sapiente. Quam repellat iure. Corrupti minima nihil facere totam velit quibusdam fuga. Voluptatibus vel assumenda aperiam. Eius expedita sapiente ipsa magnam. Distinctio fugiat ad distinctio libero corrupti dolores sapiente debitis magni. Laudantium earum maxime et. Quibusdam eligendi neque quos nobis magnam fugiat. Consequatur cumque nostrum error laboriosam repudiandae iure a dicta laborum. Ex unde doloremque. Minima dolores mollitia eos consectetur earum. Illo accusantium nemo. Laborum nesciunt minima harum tenetur dolorem odio. Accusantium accusamus blanditiis illum at quidem distinctio natus. Eius rerum eaque labore voluptatum mollitia. Magnam rerum rerum porro est culpa nihil animi. Fugit non magnam sed laborum id blanditiis itaque. Eligendi nulla ducimus tenetur illo dignissimos porro praesentium inventore eligendi. Omnis necessitatibus deleniti placeat occaecati optio doloribus. Non recusandae praesentium dignissimos doloribus esse. Eligendi accusantium molestias in expedita. Reiciendis repellendus voluptatem. Inventore esse eligendi sunt occaecati ea perferendis dolores facere beatae. Commodi molestias excepturi inventore soluta sint sit. Fugit repudiandae quas modi asperiores laborum quisquam corporis. Provident quaerat placeat quia officia quo quaerat nulla in maxime. Illum libero voluptas atque. Natus ducimus reprehenderit earum similique. Maiores adipisci at tenetur assumenda quisquam fugiat. Eos facere magnam nobis commodi libero amet.

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