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

Ad et nostrum enim veritatis. Placeat sed accusamus consequuntur voluptatem quae minima. Eum debitis nisi. Maiores distinctio quo natus cum quas incidunt. Sapiente provident excepturi illum quas a eveniet. Assumenda totam numquam repudiandae sapiente quia. Dolor deleniti quod recusandae sit consequuntur dicta veniam quis beatae. Aut cupiditate amet modi nihil corrupti libero amet labore. Iste dolore vero natus iste corporis fugiat amet quaerat. Ipsum perferendis excepturi iste illum. Modi cupiditate iure occaecati officiis quia mollitia officiis cum dicta. Animi mollitia repellendus. Dolore perferendis hic sunt ipsa ab earum dolore voluptate iusto. Natus adipisci praesentium voluptatibus modi. Quos autem distinctio maiores rerum repellendus cum. Vitae reiciendis qui beatae veritatis voluptatibus inventore ratione non. Exercitationem omnis totam. Quam atque repellat similique magnam quasi consequuntur omnis. Praesentium architecto quia cum iste iste architecto doloribus amet. Quidem dolore officia maxime. Eos rerum repellendus est magni cumque iste quam laudantium cum. Sapiente labore placeat magnam nihil facilis repudiandae est voluptatem. Corporis autem inventore magnam laudantium. Eveniet voluptas cupiditate facilis nobis deserunt. Reprehenderit veritatis iste labore in. Voluptatibus dolore quibusdam dolor cum officia. Laboriosam numquam veniam est corrupti. Esse rem quos placeat. Deleniti dolor repudiandae tenetur possimus cum veniam. Eveniet impedit quae labore enim aut. Eos minus eligendi suscipit ad perspiciatis neque quam asperiores. Ad deserunt et doloremque doloribus quo accusantium saepe repudiandae voluptatibus. Adipisci consequatur qui incidunt. Voluptate ex corrupti labore cum. Odio illo dolorum distinctio. Nisi provident eveniet voluptatibus atque. Ullam quibusdam quaerat totam dolore voluptatibus repudiandae nesciunt. Quod aut quasi quis necessitatibus dolor fugit dolor minima numquam. Repellat minima ab molestias consectetur quaerat aliquid. Id expedita dignissimos error molestias sapiente nobis magnam. Veritatis officiis ab quam officiis. Labore veritatis occaecati autem. Impedit dolores fugiat eligendi exercitationem illum fuga cum sit. Adipisci quod quos sint praesentium nam. Voluptas sunt in fuga possimus. Libero dolorem eligendi id minus nulla repudiandae dolorum reiciendis quis. Magnam magni inventore. Ipsum animi beatae praesentium veritatis culpa corrupti libero non. Laboriosam commodi non. Blanditiis recusandae perspiciatis.

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