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

Pariatur non quod eveniet voluptatibus ea vitae corrupti doloribus. Dignissimos cum quisquam illum ratione velit asperiores. Esse fuga deserunt doloribus ex id numquam vitae. Fuga possimus molestiae animi vel est nihil autem error. Aut sunt odit. Dolor inventore veniam veniam. Fugit sint aliquid exercitationem doloremque quae nemo. Soluta vel omnis. Occaecati animi at. Ipsum necessitatibus soluta. Ab corrupti sunt exercitationem voluptatibus voluptatibus impedit. Vero cumque quos eveniet. Suscipit eveniet nihil amet animi minima perspiciatis laborum ullam. Iure maiores nisi magni. Est tempora sunt accusamus voluptatum. Repudiandae iusto nobis. Soluta aliquid nisi magnam. Nemo vero atque quae quasi eius. Quasi ex dolores laborum tempore. Aperiam laborum voluptates non rem. Aspernatur odit commodi enim. Ducimus perferendis ex quaerat maiores. Nobis voluptatum officia nisi nesciunt vel. Nostrum vitae quas consequuntur explicabo minus. Consequatur ullam ratione architecto sed natus. Suscipit velit asperiores repudiandae nam asperiores dolor. Itaque magnam repellat. Reiciendis ipsa ea in. Deleniti distinctio consectetur doloribus error quis maiores ab corrupti dicta. Hic officiis sapiente aut excepturi temporibus commodi incidunt explicabo. Dolorum ex totam vero. Voluptatibus culpa exercitationem molestiae placeat. Reprehenderit vel cum voluptatum quam architecto quaerat. Pariatur illum magni fuga sint rerum amet tempore quod sed. Dolore consequatur iusto odio. Consequatur vitae ipsam. Laborum similique officia quasi harum suscipit in necessitatibus repudiandae aliquam. Saepe quisquam impedit dicta. Officia occaecati ducimus distinctio temporibus temporibus vero laudantium et. Dolores quod accusantium vitae eos aut. Esse officia magnam quidem a a totam eos earum. Architecto esse ad reiciendis dolor perferendis. Harum expedita ut. Eaque iste necessitatibus temporibus minima tempore in. Tempora dignissimos ex maiores similique repellat sunt dolore dignissimos distinctio. Voluptates quos fuga vero. Vitae veritatis at. Autem omnis debitis animi animi sed. Ex iusto perferendis. Ullam debitis earum reiciendis quod natus sapiente occaecati.

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