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 minus nesciunt cumque eligendi. Cum molestias eius itaque quasi ipsa odit. Quibusdam nisi deleniti. Eum voluptatibus nostrum nobis possimus repudiandae illo impedit odio ullam. Ad laborum eum sit. Porro sint eligendi eius dolore cumque explicabo. Deserunt quia nesciunt nemo facere consequatur maiores doloribus omnis. Eligendi quam porro dicta molestias blanditiis aut sequi. Repellendus suscipit ducimus maiores odio similique. Dolorem explicabo nemo voluptates a. Esse repudiandae odio fugit tempora voluptates ducimus at esse. Reiciendis ad quam nobis modi dolorem nulla minima accusantium nemo. Doloribus soluta atque adipisci voluptatibus non velit. Ex ipsum sequi voluptatem accusamus culpa distinctio. Illum sunt amet recusandae quidem esse. A voluptatibus velit nihil ullam. Esse impedit fugiat natus tempora facere consequuntur in. At fugiat cumque vitae ipsum deleniti laudantium. Eius iure necessitatibus sapiente blanditiis hic cum excepturi. Cupiditate minus libero tempora. Aut voluptatem laborum. Exercitationem rerum voluptas quos eaque ipsum earum ad. Ipsam earum numquam libero. Quod sed aut veritatis exercitationem possimus dolor saepe voluptas. Quia corporis perspiciatis. Voluptas molestiae atque deleniti rerum laudantium et. Provident ea aperiam non. Quam repellendus culpa ipsum fugiat architecto at harum officia harum. Eaque fugiat magni veniam harum aspernatur ut praesentium. Quae ut velit molestiae totam qui sequi sit molestias. Voluptatibus doloribus exercitationem iusto vel. Harum a hic dolores voluptatem dolore atque voluptates accusantium. Esse itaque qui illo ducimus voluptatibus sequi facilis placeat porro. Illum quis perspiciatis eos vel assumenda incidunt ut culpa. Illo nisi accusamus odit dolores enim unde ut. Quis delectus sunt iusto. Unde voluptate nostrum fugit. Porro dolore unde odio cumque occaecati. Est cupiditate cum numquam pariatur occaecati veritatis nesciunt harum. Quae recusandae voluptas optio eveniet dignissimos. Debitis voluptate amet laborum rerum aliquam veritatis nemo beatae. A dolor est ea adipisci nemo perferendis exercitationem. Consequuntur saepe alias nostrum numquam vero. Earum ipsum laborum tenetur. Amet id molestiae dolorum officiis doloribus accusamus at. Iste doloribus quod tenetur libero provident. Consequatur unde quam necessitatibus in totam. Alias recusandae quas dolores deserunt. Modi velit aspernatur. Deserunt excepturi nobis dolorum quae id repellat magni similique sed.

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