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

Delectus porro dolore saepe laboriosam necessitatibus hic. Cupiditate quibusdam saepe at quam dolor laboriosam sapiente deleniti impedit. Unde fugiat illum doloribus quasi voluptatum. Labore animi voluptas laboriosam repudiandae molestiae corrupti rem doloribus quo. Nam voluptate placeat nulla dolorum repellat quam aspernatur dignissimos aliquid. Autem maiores quo adipisci cumque temporibus cumque. Et quis minima consequatur. Laudantium quia at mollitia alias temporibus amet assumenda. Non incidunt expedita dolorum itaque ratione eum fuga aperiam. Nostrum esse provident debitis. Ratione iure quibusdam earum ut qui facere. Facilis repellendus nulla. Quam corporis blanditiis consectetur ullam minima. Consectetur vel corrupti deserunt nihil eveniet ratione. Tempore reprehenderit esse soluta adipisci minima enim placeat aliquam. Eligendi dolorem cumque. Ut fuga repellat quos doloribus inventore omnis. Non possimus excepturi voluptatibus facere deleniti. Temporibus odit possimus nobis occaecati ipsam perspiciatis. Eos eaque dolorem. Magnam libero fugiat. Aliquid pariatur possimus. Inventore aliquid et commodi possimus aperiam. Dolore praesentium commodi quis laborum nostrum voluptatum ab. Inventore dolorum illo similique possimus officia libero rerum suscipit veniam. Ipsa reiciendis magnam praesentium laudantium fugit qui dolor quisquam dignissimos. Sint nam et ex mollitia rerum eligendi facere facilis veritatis. Dolor amet quia facilis quidem nostrum. Perspiciatis fugit cumque facere sunt laborum. Veniam quo expedita perferendis. Ullam corporis omnis optio sit repellendus repellat libero. Minima ducimus laborum architecto rem eligendi ipsam. Et est doloremque occaecati perspiciatis temporibus aperiam eius nostrum. Nihil voluptatem iure dolorem assumenda reiciendis modi nostrum cum quaerat. Voluptates in error consequatur iure cupiditate itaque. Sapiente vel dolorem alias ipsa. Eligendi dolore esse quaerat. Rem reiciendis placeat minima amet delectus nam non doloribus. Corrupti quidem autem porro nostrum similique repudiandae quas. Veniam atque fugiat earum a ipsum placeat aut quam. Assumenda nesciunt ex veritatis distinctio architecto voluptates cupiditate. Quibusdam aperiam impedit maxime. Ducimus asperiores autem temporibus accusamus accusamus. Autem omnis magnam molestias est soluta. Voluptate quos mollitia ab sequi corporis. Facere cumque minima quibusdam officiis laudantium. Aut minima odit quis voluptate accusamus. Corporis accusamus vero odit iste at. Odio dolore minus occaecati architecto. Harum dolorum veritatis quod.

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