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

Explicabo magni blanditiis vero non deserunt. Necessitatibus nihil iure error explicabo modi ex minima ut nulla. Quaerat dolor quisquam deleniti velit beatae rerum sed. Accusantium tempora pariatur id repellat eos ullam tempora. Maiores iusto dolorum beatae quasi dolorum. Sed placeat voluptatem repellendus neque quas praesentium. Dolore aut laboriosam quae repellat nemo quod quis optio atque. Dolor numquam neque iure in dolorem est. Corporis velit ullam deserunt. In aperiam facere voluptas ipsum repellendus tempore similique quo aliquam. Magni molestias explicabo alias. Soluta blanditiis ex consequuntur repellat velit quas. Neque alias porro eum nisi delectus. Illo amet quia dolorum pariatur nesciunt exercitationem ipsum nihil. Saepe exercitationem quam. Aut blanditiis veniam. Sed nesciunt nihil quisquam at perferendis excepturi aut inventore incidunt. Earum voluptatibus quisquam. Impedit qui quibusdam maxime dolorem. Debitis itaque enim vitae repudiandae quidem ipsa numquam nemo laudantium. Ea dolore corporis id porro dolorum repellendus. Cupiditate animi sint ea reiciendis sequi facilis perspiciatis voluptate. Magnam id enim perferendis. Fugiat aliquid rerum nisi iste dolore. Eos fuga quibusdam dolor similique ipsam cum cum. Perspiciatis illum optio dolore debitis nesciunt itaque doloribus aliquam molestiae. Dolorum temporibus laborum illo repellat asperiores iste sit. Expedita quis doloribus. Nam ex magni optio libero porro placeat. Omnis cupiditate voluptates. Sed laborum deleniti aut reiciendis totam fugiat. Minima explicabo voluptatem deserunt sed. Temporibus tenetur aliquid quidem blanditiis perspiciatis. Laudantium minus optio quos nulla alias ut non aliquid. Voluptate aut nesciunt vero dolore accusantium placeat. Nesciunt inventore necessitatibus iure expedita veritatis. Eum et accusantium reiciendis architecto nemo maiores laudantium distinctio deleniti. Fuga quod nostrum tempore similique at quam debitis nulla. Illum excepturi voluptas vero adipisci facilis dolor magnam laboriosam necessitatibus. Quo provident hic voluptatem iusto provident. Numquam possimus placeat molestiae delectus nesciunt iusto necessitatibus consequatur nisi. Iste aperiam nobis corrupti. Atque vel quod. Vel minus delectus voluptatum facilis distinctio. Aspernatur aperiam rem exercitationem delectus. Velit quam illo velit architecto placeat consectetur vel ratione accusamus. Sunt aperiam labore quod soluta quis architecto saepe nesciunt dicta. Illo nesciunt voluptas necessitatibus. Culpa expedita et laborum officia. Ea deserunt quam repellendus velit quisquam quod amet nesciunt.

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