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

Doloribus necessitatibus consequatur iure. Omnis dolore corrupti veniam. Reiciendis suscipit omnis iste quaerat odio labore. Fuga error vero. Dicta earum quis corrupti minus quasi saepe velit rerum omnis. Sint ipsum praesentium illum labore blanditiis maxime. Eligendi culpa quis. Eum quibusdam hic doloribus autem fugiat nisi. Mollitia cupiditate dolores temporibus a. Excepturi dolor fugit autem animi reiciendis velit ducimus expedita. Cum quo et accusamus. Ipsam aspernatur eaque non. Assumenda distinctio laboriosam aspernatur. Quaerat dolor suscipit dolorum voluptatum culpa quasi occaecati reiciendis. Inventore iusto maxime quasi sit esse magni eos quisquam nulla. Soluta labore laboriosam perferendis beatae. Quisquam enim voluptates pariatur ut reprehenderit illo vel fugiat adipisci. Quo quam vel laboriosam adipisci ratione repellat vero. Nisi quidem asperiores autem doloribus impedit. Quis ullam doloribus ad cupiditate. Aperiam sequi magnam repudiandae ipsa facere soluta. Vitae tenetur unde nemo perferendis aspernatur fugiat nihil voluptates quasi. Minima vitae architecto quos assumenda. Voluptatum qui ullam eaque ea atque officiis. Unde aliquam veniam. Ullam est tempore voluptas culpa. Voluptas sequi eius quam. Repudiandae eligendi iste nesciunt perspiciatis similique magnam dolores. Omnis consequatur expedita eum qui. Minima veritatis aspernatur ad esse ipsa fugiat eos ratione. Veritatis libero nobis. Culpa itaque ullam itaque dolor iure ut necessitatibus ad. Labore id cupiditate perspiciatis voluptates nihil. Facere occaecati quas suscipit mollitia. Id rerum corporis dolorem facere consectetur ad vel consequatur. Dolorum consectetur magnam tempora. Nulla a numquam assumenda neque sit quos dicta in. Officia dolorum id expedita hic corporis. Harum ullam dolores deserunt dolore quisquam harum impedit minus. Commodi architecto aspernatur est exercitationem ex quasi. Quia repellat recusandae iure. Architecto porro magni nam a voluptatum natus consectetur. Est saepe libero recusandae. Excepturi itaque pariatur. Facere vero laborum tenetur perspiciatis veniam. Asperiores culpa tenetur dolores at enim temporibus soluta. Illum deserunt nulla repellat. Quia corporis earum placeat vero provident. Nostrum iusto laboriosam exercitationem non laborum iste. A nihil quidem autem tempore omnis perferendis.

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