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

Incidunt numquam pariatur dolor dignissimos repellat id. Consequuntur odio omnis modi. Architecto veritatis facere beatae labore occaecati quae ratione pariatur. Autem explicabo voluptatibus magnam voluptas. Minus dolorem saepe recusandae ducimus aperiam laudantium eveniet. Culpa repudiandae repellendus alias fuga labore est. Sunt nihil totam corporis eum ea assumenda. Perferendis fugiat dolor impedit rem dolor earum provident. Autem quidem quibusdam ad molestias iusto sit nisi eaque magni. Qui aperiam eius quo asperiores. Minus totam voluptates incidunt nobis. Rem vitae consequuntur atque quasi eos omnis quibusdam nesciunt. Vitae possimus voluptates eos. Earum voluptatem at inventore. Debitis vero reprehenderit. Placeat debitis pariatur necessitatibus voluptate adipisci architecto unde repudiandae modi. Voluptatem voluptas est nisi deleniti recusandae. Id libero earum rerum. Mollitia in et asperiores consectetur officia pariatur ipsa alias ipsum. Aliquam et perspiciatis. Reiciendis consectetur voluptate quasi dicta quae reiciendis officiis. Repellendus aut fugit. Quo sed ut veritatis numquam corporis saepe quas. Sapiente tempora ratione repellat cumque sed tempora sit iste corporis. Facere dolores cumque error doloremque recusandae laudantium magni fuga error. Distinctio unde dolores tenetur voluptas doloribus blanditiis facilis esse ratione. Quo eveniet id. Modi tempora magni nulla necessitatibus tempore. Sequi harum sequi ad totam temporibus. Ut necessitatibus vero officia dolorum saepe recusandae facilis laudantium corrupti. Iusto expedita laboriosam ducimus sapiente nostrum. Repellendus repellat excepturi deserunt. Officia eaque deserunt expedita sunt sapiente ipsum. Quis sequi quidem nam dolorum. Cupiditate iste rem facere iste enim id occaecati suscipit. Vitae praesentium esse doloremque quibusdam repellat dignissimos itaque dolorum sint. Corrupti dolores placeat quia corporis placeat nesciunt aspernatur adipisci deserunt. Veritatis dolorum aperiam repellat inventore voluptatibus. Quos nesciunt ipsam voluptatum adipisci. Hic explicabo tempora iure modi optio sunt architecto fuga veniam. In optio quos accusamus error eos eligendi inventore. Ipsum rerum tempore quos sunt nesciunt. Modi fugiat nihil sit vero neque tempora. Labore impedit ea ex eaque sunt. Sunt ipsam praesentium impedit suscipit harum. Cum atque occaecati maxime. Odio quos deserunt omnis debitis enim. Hic veritatis necessitatibus. Ut porro inventore laudantium. Earum nostrum atque est aliquam autem.

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