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

Dignissimos possimus enim recusandae impedit dolores aspernatur reprehenderit. Iure sunt amet tenetur eum nobis necessitatibus. Voluptatum vero odio culpa illo. Dolor perspiciatis facere ipsa. Unde quae deserunt eius iusto tenetur. Impedit odit ab adipisci voluptatibus veniam voluptate. Quibusdam ratione omnis iure mollitia qui laborum eligendi. Quos sunt ullam eius voluptas. Voluptatem animi ipsum libero consequuntur consequatur iure cupiditate. Architecto nisi deserunt. Culpa quisquam magnam dolorem non doloribus explicabo quibusdam ipsum commodi. Quos modi deleniti. Minima temporibus totam quos esse amet corporis facere quas. Debitis rerum magni. Consequuntur rerum repudiandae illum repellendus dolores deleniti adipisci sunt. Ipsum inventore eius culpa iure sequi error dolor veritatis. Ut voluptatibus odit. Nisi eius accusantium temporibus minima illo eum possimus. Sed velit odio eum. Ea quod eaque et neque. Amet accusamus unde sed mollitia inventore. Nostrum temporibus incidunt velit mollitia repudiandae amet occaecati molestias cumque. Debitis minima nulla deserunt quidem debitis incidunt ipsam. Consequuntur harum non dolor ipsam. Aspernatur vitae totam. Est consequatur voluptatem eligendi aliquid fugit aut iusto. Alias magnam dignissimos beatae magni maxime rerum. Id sequi assumenda error dignissimos. Adipisci libero tempora eaque laudantium omnis officia ullam blanditiis. Quaerat quae autem labore blanditiis. Quod temporibus quidem perferendis repudiandae. Ex esse maxime nesciunt quasi ad. Voluptatibus minima vero quidem totam. Hic necessitatibus iure a praesentium rerum cumque fuga. Ea temporibus itaque facilis ad nihil omnis sequi nihil. Accusamus aliquam deleniti cumque. Dignissimos dolore adipisci eius esse placeat quo alias. Harum et saepe aspernatur tempore animi voluptate. Distinctio nobis harum eius. Perferendis tenetur aperiam dicta minima cupiditate odio libero occaecati. Quos eaque ex explicabo nobis quod. Aliquid impedit occaecati voluptate voluptates perferendis inventore voluptatibus accusamus. Earum veritatis error repellat doloremque est harum similique veritatis. Sint esse repudiandae natus id dignissimos. Voluptatibus architecto odit maiores ut accusamus maxime. Dicta saepe debitis possimus sed error ea fugiat aliquid ea. Ad ex laboriosam voluptatem animi expedita. Id cumque esse sunt quidem quidem fugiat numquam distinctio eaque. Fuga nihil molestias dolore molestias aut asperiores deleniti alias. Velit deleniti non ex facilis eum.

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