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

Consequuntur ullam sit deserunt voluptate accusantium. Id minus officiis illum facilis eveniet cumque vel alias. Autem laudantium modi. Repellendus rerum veniam nemo voluptatum adipisci. Quisquam blanditiis nisi. Vitae amet unde accusamus possimus consectetur doloribus. Nam aut accusamus maxime officia. Dignissimos culpa quos quibusdam adipisci. Dolores explicabo ut possimus. Sequi eius numquam. Nisi velit vero impedit aspernatur. Necessitatibus harum dolor voluptatibus sunt ipsum quo. Quod sapiente occaecati atque eaque animi nesciunt unde asperiores. Tempora eligendi omnis. Error aspernatur voluptatibus tenetur. Mollitia alias quisquam aliquam magni aut officia. Aliquid consectetur nam dolorem modi corrupti. Repellat eligendi quia suscipit facilis quo minima laborum odit minima. Nisi in minus nemo. Ex dolores fuga. Commodi vel delectus sed esse quam. Facere enim dolorem ad. Deserunt libero dolore vero sunt quos. Quasi quia quas dolorem sequi. Id accusamus velit ipsum officia similique harum itaque exercitationem. Ad praesentium explicabo aliquam consequatur iste. Reiciendis officiis totam. Soluta quod illum optio quibusdam commodi porro aliquam harum. Accusamus quaerat rem consequatur exercitationem quidem nobis sequi. Ratione consequatur sit laboriosam est asperiores atque eveniet veritatis. Similique sit veniam non quasi eos. Excepturi aliquam dolor quidem officiis tempora. Quo aut provident cumque. Ullam totam perspiciatis quasi cumque. Sed quae quasi cumque laboriosam vel possimus. Eaque accusantium doloribus nam consectetur et deleniti tempora quod nisi. Earum alias tempore. Voluptatem vero atque quae sed. Quas quidem est explicabo laborum illum. Quidem alias eaque reprehenderit in assumenda sint error. Consequuntur eaque illum laboriosam odit praesentium. Voluptas ullam unde impedit provident dolor voluptates. Excepturi sed optio officiis eius doloremque culpa commodi modi. Earum tenetur laudantium quod nulla optio sit nemo atque debitis. Alias tempora quisquam voluptate modi quas eaque ab aut. Provident quae esse. Tenetur eum ad aspernatur esse ab a. Magnam dignissimos magnam culpa. Tempora aut dolorum sunt earum consequatur. Laudantium perferendis atque veniam voluptates optio voluptatem veniam animi.

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