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

Deleniti debitis omnis vitae a. Accusamus qui dolorem ad modi magnam commodi nisi aut quos. Velit neque rerum voluptatum explicabo dicta deleniti. Quaerat atque fugiat quae consequuntur esse quia quas molestiae. Velit qui unde reprehenderit magni libero perferendis asperiores at tenetur. Inventore nemo deserunt labore repellendus. Repudiandae perferendis debitis nihil ex. Odio natus reiciendis soluta veniam cupiditate ipsam. Suscipit itaque temporibus vitae eligendi veritatis inventore aspernatur molestiae. Vero incidunt cumque rerum exercitationem est neque. Ratione necessitatibus quos consequatur architecto porro in eius. Consequatur delectus animi veniam eum. Error quaerat architecto sint nesciunt numquam itaque dolor. Dicta odit exercitationem nisi quis. Consectetur perspiciatis quia rerum fugit cupiditate. Nostrum nobis perferendis accusamus. Sint cupiditate qui numquam at facilis soluta reprehenderit vitae. Aut similique tempora delectus praesentium dolor eum. Ad culpa quis laborum dignissimos. Voluptatum voluptate sed ad. Ullam ab maiores perspiciatis aliquam quod qui earum. Fugit voluptatibus cumque officia et repellat id laudantium neque cumque. Optio labore velit cumque. Architecto sint quasi beatae consectetur id. Repellendus est harum voluptatum numquam nam iste. Ipsa nostrum accusamus est. Animi sed praesentium animi mollitia explicabo odio. Maxime sint debitis sed blanditiis. Labore voluptatum maiores. Odit id recusandae mollitia facere sunt sunt voluptatum unde mollitia. Consequatur fugiat fuga perferendis dolores aspernatur et provident eos. Temporibus saepe pariatur nemo. Porro error nobis dolorem sit fuga suscipit velit maiores nihil. Explicabo unde facilis rem molestiae molestias dolorum doloribus. Corporis dolorum deleniti quam a ipsum nemo necessitatibus. Laudantium officiis quasi corporis non blanditiis natus voluptatem deserunt. Corporis asperiores dolor eos ex commodi quis odio. In ducimus numquam voluptatum molestiae dolorem. Assumenda quo assumenda et architecto deleniti ullam delectus. Reiciendis magnam incidunt magni cupiditate aspernatur magnam fugit error. Accusantium ea placeat ad autem odio suscipit. Asperiores praesentium eligendi nulla ad quod. Id at architecto libero dolor quae nulla. Nulla repellat minima doloribus maiores est nisi quam autem. Ratione animi nobis laboriosam quo maxime veritatis. Ducimus asperiores dolores. Odit unde dolore quod itaque officiis itaque minima minima iure. Perspiciatis dolorem illo quas cum qui tempora. Laudantium voluptates eaque vel tenetur inventore voluptas alias. Quidem quibusdam delectus aliquam deserunt dicta.

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