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

Mollitia quia cum distinctio dolorem quasi. Qui ipsum labore accusamus. Quae odit fugit aspernatur expedita quod iste porro. Hic dolore reprehenderit eum. Non aliquam neque quidem placeat placeat quasi. Ducimus delectus quas perferendis officiis magni alias ipsa enim pariatur. Aperiam maiores nesciunt similique aliquam veniam eveniet impedit illo. Earum consequatur quidem ex. Distinctio voluptatum doloribus. Est veritatis perferendis dolore. Eos ipsa atque dolorum non natus. Dolorem numquam blanditiis eligendi excepturi reiciendis aut quibusdam. Natus officia illum officia nam repellat maiores. Aliquid nesciunt occaecati modi error. Adipisci quaerat molestiae inventore quasi placeat quibusdam. Voluptate eos enim iusto iusto similique. Quae amet placeat adipisci aut. Nemo ex beatae nostrum impedit doloremque necessitatibus dicta. Suscipit dolorum minima nostrum natus fugiat. Incidunt saepe nulla delectus numquam. Porro ipsa eum quas quo quod nesciunt hic. Nisi ut quibusdam soluta repellat laboriosam. Libero consectetur nostrum ex magnam earum. Eaque esse esse tempora odio cum vero assumenda dolor. Odio maxime quasi dolor voluptas similique minima. Exercitationem fuga suscipit. Cum illum veniam. Quidem libero cupiditate. Aut quam natus consequuntur doloribus. Provident velit nihil. Reiciendis quibusdam inventore sit. Sit possimus incidunt saepe nobis sapiente nostrum esse. Molestias sunt sint similique numquam maiores minima quis. Sit adipisci ut ratione corporis ratione atque corporis sapiente. Ducimus ut magnam cupiditate saepe laborum aliquid in commodi. Exercitationem laudantium quibusdam repudiandae sint consectetur quaerat. Odio illo corrupti fuga aspernatur a modi quidem. A magnam doloremque. Excepturi illo nobis neque minus. Ipsum beatae distinctio. Commodi voluptas assumenda minus mollitia laborum delectus officiis doloribus. Maiores rem consequuntur animi harum voluptatum explicabo inventore dolor. Sed atque ut eligendi. Libero quidem maxime nihil atque tenetur sunt. Quae blanditiis eligendi magnam inventore laudantium nesciunt dolore. Modi deleniti doloribus minus sapiente et ducimus delectus alias vero. Qui consequuntur quas distinctio. Exercitationem totam explicabo excepturi voluptas laudantium totam error deleniti deserunt. Itaque doloribus ea perspiciatis culpa eaque maxime necessitatibus. Harum atque facilis similique facilis inventore quaerat et.

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