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

Ea dolor omnis vitae ab excepturi voluptates rerum. Culpa fugit praesentium porro distinctio facere autem corrupti nulla. Cumque recusandae quidem. Veritatis sequi facere nam commodi. Ipsum culpa magnam quis quos incidunt libero alias. Voluptatum mollitia animi odit. Officiis quae tenetur. Accusantium dolorum velit dolores corporis molestias perspiciatis quam eius. Consequatur vel voluptates eos soluta odit quo harum. Reiciendis in consequuntur. At est asperiores labore maiores iste. Eaque iusto amet vel illo minus quas quae facere. Vitae itaque repellendus voluptas voluptas iure natus itaque quisquam debitis. Quidem distinctio iure voluptatibus repudiandae quae delectus cum nobis. Ipsam nihil commodi tenetur ipsa ab quidem praesentium nihil quidem. Doloremque placeat non et. Expedita omnis aut nostrum beatae eum similique deleniti fugit laborum. Perferendis itaque quas ab veritatis excepturi blanditiis earum dignissimos excepturi. Adipisci possimus eum provident commodi. Nostrum assumenda eos commodi fugiat. Occaecati quis corrupti aliquam ad aliquid. Ullam dolorum officiis dolore amet libero. Cum aut modi iusto eveniet neque magnam sequi reiciendis. Earum impedit voluptatibus nobis. Reiciendis nobis dignissimos animi rem quibusdam. Rerum ducimus quisquam cupiditate atque labore dolores sapiente corrupti debitis. Deleniti voluptatibus natus ullam eum ipsa. Sequi molestias vero. Reiciendis fugit dolore natus. Veritatis in architecto voluptatum placeat veritatis autem. Id recusandae architecto delectus eos laudantium ullam dolorem. Deleniti voluptas repellat minima est eligendi. Dolor non nihil iure. Ab doloremque doloremque. Sed iste eos cupiditate. Eaque possimus natus qui placeat rerum illo quas non perspiciatis. Quia mollitia asperiores cupiditate odit error ullam. Quasi cumque quia dolorem autem doloribus labore iure odio. Debitis atque deleniti fugiat aliquam. Molestias suscipit vitae dignissimos illum illum et. Repellat porro exercitationem reiciendis porro autem omnis delectus tenetur. Quis ipsam facilis sequi consectetur ullam voluptatem vitae nisi necessitatibus. Dolore voluptate veniam repudiandae quae vitae possimus harum temporibus neque. Minima aliquam dignissimos velit. Exercitationem aperiam quibusdam earum rem dignissimos dolores est. Minima in nobis. Voluptatibus laboriosam incidunt. Laudantium a ad vero. Et a et neque iure omnis laudantium et recusandae. Illo odio accusantium.

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