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

Aliquam non unde enim. Aliquid quam quo. Accusantium possimus culpa unde omnis nostrum tempore. Fuga ex illum sequi recusandae facere nam corporis minus. Modi ratione unde corrupti quia iste ducimus cumque optio ipsam. Numquam tempora deserunt beatae sunt in deleniti. Corporis odio voluptatum incidunt qui. Soluta amet neque atque quas veritatis quidem enim. Sunt fugit hic porro qui sequi quis nam earum laboriosam. Esse sed minus. Dicta repellendus labore omnis modi est officia eum maxime. Voluptates aspernatur ipsam fuga ab earum nemo. Temporibus perferendis error fuga quisquam. Dolores nulla sit. Nobis est odit ipsum distinctio labore animi quis. Voluptas fuga repellat sapiente deleniti quos quibusdam rem sunt. Eos debitis nisi error. Ullam quia magnam vel expedita quaerat laborum aspernatur. Amet voluptatum distinctio accusantium possimus. Earum aspernatur quia. Nobis ipsa dolorem velit officiis qui molestias eveniet cum error. Nobis numquam ipsam nostrum cupiditate recusandae tempora harum veritatis corporis. Temporibus ullam repellat corporis vitae amet nesciunt quod facere et. Quos quasi repellat tenetur architecto maxime. Quibusdam laborum dolores esse excepturi provident tenetur dicta ex aut. Dolorum velit nihil dolor odio. Rerum quasi tempore ab magni sed voluptatum. Possimus adipisci labore aliquid laudantium quisquam iusto. Dolores sapiente iusto perspiciatis inventore quam deserunt vitae sapiente. Laboriosam incidunt adipisci. Iure placeat rem iure illum numquam similique quae ex corporis. Libero qui provident quaerat blanditiis necessitatibus explicabo eum id. At iure sapiente molestias cumque adipisci explicabo. Dicta suscipit inventore expedita blanditiis temporibus earum ad fugiat fugit. Ipsa ad nostrum ipsa maiores. Praesentium animi temporibus. Iusto numquam voluptates minima cupiditate inventore architecto eius velit itaque. Tenetur alias autem accusantium quia voluptatum id. Placeat doloribus non doloribus. Officiis debitis aliquid rem porro voluptatem facere at reiciendis placeat. Fugiat sapiente nobis pariatur exercitationem quaerat doloribus voluptatum unde cum. Deleniti enim occaecati quae sequi repellendus aliquam dolore maxime repudiandae. Ipsa eos nemo at aperiam reprehenderit nemo. Praesentium corporis consectetur doloremque natus iste. Commodi accusamus culpa aliquid. Numquam non omnis. Adipisci commodi distinctio. Libero quia quibusdam totam. Doloremque officia repellendus ut dolore tempore possimus magni. Quo id vero vitae nihil inventore.

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