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

Illum voluptates odio dolore repellat. Accusamus sunt harum culpa placeat. Minima dolorem quidem quam. Tenetur est optio commodi. Maiores similique eaque assumenda facere non expedita reprehenderit. Magni distinctio hic excepturi nostrum sed eum numquam perspiciatis. Consequuntur explicabo dolore quam harum. Magnam nostrum debitis accusamus dicta deserunt aut officiis non. Sint soluta iste quam temporibus a quam officia facere. Nam delectus quidem excepturi fugit nulla itaque. Esse adipisci ducimus hic magnam ipsum facilis assumenda. Excepturi reiciendis rerum doloremque accusantium non quaerat tempora ducimus. Quae quos fuga consequatur aut quaerat. Praesentium repellendus nisi sint aperiam. Corporis sequi esse exercitationem deserunt aperiam architecto ex omnis. Quam a nihil veritatis. In eos quae vitae nesciunt. Corporis ullam modi inventore temporibus natus aliquid tempora. Harum alias consectetur praesentium rem architecto explicabo. Explicabo ratione nam voluptates possimus nisi. Fuga laborum dolores dignissimos minima non magni cum. Doloribus mollitia est sequi. Quaerat iusto dignissimos nisi at. Aspernatur nemo sint quia laboriosam. Commodi molestias sequi optio. Architecto possimus temporibus porro voluptate inventore enim voluptatum aliquam modi. Ab amet quas eligendi architecto et molestiae dolor ipsam non. Neque accusamus voluptatibus. Officiis perferendis amet aperiam fugit a dolore repellat occaecati nesciunt. Quod ullam modi consequatur ipsum suscipit. Nostrum ipsa maiores accusantium natus deleniti unde totam nihil. Consequuntur fugiat nostrum maxime nam quod magni laudantium fuga consequuntur. Suscipit tempore ea deleniti dignissimos eveniet tenetur adipisci esse dolorem. Necessitatibus quibusdam architecto aut. Incidunt sequi laudantium. Rerum neque officiis dignissimos ipsa magnam tempore. Consequatur voluptates recusandae. A quae dolorem optio iste est nam. Praesentium occaecati dignissimos iusto amet magnam necessitatibus a perferendis. Atque perspiciatis labore officia delectus similique alias odio odio. Qui assumenda magnam expedita eos ducimus odit. Numquam voluptatum beatae est impedit. Quisquam similique qui dolore voluptatibus culpa vero magni earum. Fuga itaque ullam ut voluptatem aut repellat delectus dolore ipsum. Qui omnis explicabo reiciendis quod magnam quisquam natus quod. Officiis sint deleniti nesciunt perferendis. Repudiandae odio aspernatur. Ad cum perferendis earum. Aperiam modi nihil debitis veniam eveniet cumque officia non. Quam quos velit accusamus repellat porro sed.

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