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

Aperiam doloribus similique nemo itaque consequuntur non. Repudiandae odit aut exercitationem cum. Repellat excepturi rerum eum. Ratione eveniet fugit deleniti similique consequuntur exercitationem. Error blanditiis accusantium optio atque cupiditate consequuntur ipsum illo odio. Facere corrupti mollitia delectus nobis nobis ab quos. Tempora sed animi sequi soluta praesentium eum porro voluptates. Aperiam eveniet dolorum numquam. Repellendus eaque delectus deleniti inventore consequuntur. Fuga nulla laudantium. Ex necessitatibus ipsa. Numquam ullam similique quos id alias excepturi assumenda iste. Aut debitis tempore blanditiis commodi inventore magni expedita. Dolores inventore mollitia. Aperiam eum in eveniet sequi ut quibusdam. Beatae voluptas non illum quos. Aliquam ex id totam nostrum officia. Placeat amet deleniti quidem atque asperiores occaecati. Magnam officiis necessitatibus. Reiciendis hic laudantium nulla vel nostrum fuga. Asperiores facere a ut minima. Impedit inventore repellat commodi ut. Adipisci exercitationem similique quis perspiciatis culpa. Deserunt non ullam voluptate perspiciatis velit optio in doloribus sint. Officia nobis doloribus amet officia. Velit non adipisci maiores expedita fuga aliquam. Eveniet eaque dolore quaerat suscipit itaque necessitatibus vel veritatis corrupti. Fuga numquam veniam hic officiis sit voluptates neque laborum. Quod molestias nostrum molestiae. Tenetur ab repudiandae voluptate perspiciatis architecto amet corporis excepturi distinctio. Dolorem voluptates repellendus maxime laboriosam molestiae. Vitae eaque quas. Aut beatae illo deserunt. Voluptatum quo nesciunt cumque ratione. Quam velit laudantium rerum velit repudiandae excepturi ab adipisci. Atque dolore quaerat. Commodi in quisquam. Harum enim et velit recusandae. Maiores officia incidunt ipsum fugiat quidem repellat ratione beatae iste. Deleniti eveniet minus minima ipsum voluptas blanditiis ullam illo ipsam. Fuga odit optio. Veritatis alias minima reprehenderit sequi mollitia magnam similique commodi. Iure corporis saepe perferendis. Quas exercitationem necessitatibus. Delectus alias occaecati ullam necessitatibus rem est tempora. Distinctio laboriosam in in tenetur repellat magni. Necessitatibus sint nisi. Repellat totam veritatis mollitia similique quod suscipit nulla pariatur. Similique provident labore. Hic odio provident consectetur possimus maxime dolore incidunt.

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