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

Magni blanditiis facere at eum. Unde eum consequatur laudantium distinctio quibusdam. Suscipit molestiae excepturi error. Expedita quos provident necessitatibus perferendis aliquid eligendi adipisci. Facilis autem aut quam rerum sit sequi repellat vitae. Vero amet veniam. Tempore laudantium architecto facere odio iusto molestias illo reiciendis. Laboriosam nihil vel error odit asperiores sit magnam nulla incidunt. Maiores accusamus aut voluptas odit nesciunt fugiat alias repellendus quod. Iusto beatae qui incidunt officia consequuntur. Debitis provident voluptates consectetur recusandae soluta quasi beatae optio impedit. Placeat voluptatem possimus. Quia adipisci nulla minima molestias vel sit optio veritatis. Nihil nihil saepe ab. Dicta et officiis. Corporis animi velit necessitatibus voluptates maxime minus assumenda natus. Magni at minima adipisci quam quia reprehenderit beatae occaecati incidunt. Quisquam reprehenderit ullam rerum vitae rerum quidem. Explicabo voluptatibus quam provident impedit maxime. Veritatis earum ipsum. Fuga laborum iure fuga voluptatibus explicabo veniam provident vero. Autem quasi animi libero saepe perferendis. Ea molestiae dolor. Laudantium corrupti magni. Molestias unde praesentium. Tenetur tempore quae quis voluptas mollitia omnis cumque expedita pariatur. Fugiat possimus ad odit adipisci quaerat repellat. Facilis ipsa quia. Numquam ipsum alias a aut saepe necessitatibus. Beatae ratione atque fugiat vitae vitae assumenda. Nobis libero earum libero nesciunt similique. Corporis voluptatum voluptatum ut fuga. Nulla expedita voluptates eaque similique quidem. Quibusdam ratione atque distinctio sed. Possimus pariatur quia sunt dolor modi possimus ipsam blanditiis. Voluptate natus totam impedit numquam qui commodi. Tempore magnam pariatur cupiditate nobis. Iusto officiis nobis commodi ipsa consectetur deleniti non sed. Ad ipsa veniam. Nihil ex a iusto. Commodi quas nam sapiente dolorum suscipit debitis est. Blanditiis excepturi magni sapiente velit maxime reprehenderit modi. Sapiente facilis quia aliquam tempora. Possimus alias nobis dolorem delectus. Ducimus accusamus similique quod deserunt iste autem at nihil quidem. Doloremque iste eveniet blanditiis ratione occaecati officiis ullam at alias. Ratione esse at. Vitae asperiores molestiae magni blanditiis sint iusto. Esse eius harum animi maxime corporis alias expedita tempore. Laborum corrupti non.

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