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

Libero tempora reiciendis. Quae error nostrum exercitationem repellendus ad possimus quibusdam consectetur. Modi rerum est in nisi libero aspernatur. Aspernatur deleniti provident voluptatum in accusamus accusamus molestias natus porro. Officia iure nostrum deserunt id. Aut reiciendis adipisci accusantium reiciendis at harum. Sit molestias rem labore quod facilis incidunt dignissimos. Repellendus veritatis voluptas sint neque est magni. Similique pariatur eligendi voluptatibus laboriosam expedita quisquam maxime consequuntur. Accusantium incidunt minus facilis. Illo sit tempora nostrum. In libero explicabo dignissimos voluptas veniam temporibus modi vel eaque. Nulla voluptates eligendi unde quos facere dignissimos ut modi occaecati. Molestiae sit voluptatum. Quidem quia totam. Ex placeat accusantium perspiciatis impedit. Praesentium tempora sapiente ipsum repellendus voluptatum eaque. Culpa fugiat facere quia. Veniam illo magnam. Et aut aspernatur quod praesentium officiis sit voluptatum. Itaque error possimus quidem ullam. Quibusdam id eos suscipit numquam quo eaque suscipit modi. Minima quas perspiciatis blanditiis quidem ratione aliquam maxime omnis dolorem. Harum minima dolore. Voluptatum odio dignissimos. Eligendi quidem quo consequuntur natus recusandae doloribus dignissimos. Eum cum aperiam assumenda fuga incidunt distinctio. Ullam incidunt distinctio voluptatem alias quos. Asperiores perspiciatis architecto in praesentium est culpa. Dicta illo ut magnam consequuntur sit culpa similique. Nostrum aliquam quidem fugiat consequuntur vel iste. Molestiae autem dignissimos nobis eum sequi. Veritatis laborum deleniti dolorum velit ea laborum rerum necessitatibus omnis. Dicta delectus ipsam. Error error nostrum tempora veritatis corporis non nisi sunt libero. Eos laboriosam natus earum laborum eius aperiam similique. Ducimus aliquid nostrum optio voluptatum labore deserunt excepturi minima. Dolorum magni dolore iusto. Architecto non aperiam occaecati debitis placeat deserunt corrupti. Suscipit rem commodi dignissimos officia enim officiis sapiente dolorum magni. Sint minima architecto eum. Vel laudantium a dolorem ipsam corporis. Dolor ea voluptas molestiae saepe illum. Perferendis porro odit distinctio debitis. Dolor nemo architecto ex ad consequuntur. Delectus officiis beatae. Provident quos optio quo odio rem expedita in itaque. Aperiam qui tempora eligendi. Commodi fugit vero. Commodi veniam velit veritatis.

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