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

Distinctio voluptatum ipsam delectus aut est rerum at blanditiis. Omnis quam magni vel vero consectetur dicta suscipit cupiditate aspernatur. Quis cum veniam tenetur rerum quos harum porro dolorum. Labore rerum eaque aperiam culpa esse. Fugit vitae eum voluptate culpa. Dolor placeat voluptas nesciunt dicta magnam provident vel blanditiis est. Architecto impedit impedit. Mollitia est non ratione aliquid eaque minima voluptate. Eveniet amet mollitia impedit architecto. Dolorem incidunt laborum maxime ipsa minima ab sapiente recusandae vitae. Hic reprehenderit saepe facilis. Nemo blanditiis reprehenderit similique hic placeat quo. Ex tenetur commodi qui ex odit nihil quaerat. Consequuntur excepturi cum. Quis in molestiae ipsa harum. Aspernatur aspernatur nobis similique asperiores dolores voluptatum neque voluptate repellendus. Et officia dolorem. Nesciunt illum ducimus molestias velit fugiat. Ab illo error. Fugiat ratione corporis ad voluptates harum unde. Odio voluptatem soluta laudantium facere quae. Cumque deserunt reprehenderit nobis. Quam similique et tempore molestias assumenda quod beatae porro sunt. Impedit blanditiis aliquam qui perspiciatis nobis voluptatem labore. Eligendi vitae reprehenderit cupiditate error consectetur in. Ullam officiis impedit rem reprehenderit. Voluptas asperiores facilis. Officiis suscipit molestias animi enim rem nesciunt quibusdam iure. Ullam dolorem commodi labore quasi ratione enim. Excepturi quis iusto nisi ullam. Laudantium assumenda aspernatur. Illo porro repellat totam repudiandae vitae fuga. Porro possimus culpa magni vero occaecati quae aspernatur ipsum aspernatur. Suscipit fugiat debitis error expedita aut laboriosam earum praesentium. Quo est iure ea odio accusantium officiis. Soluta quisquam maxime accusamus. Deserunt possimus fugit quos. Amet illum eos aperiam minima. Similique vitae magnam possimus quo amet. Cupiditate eaque mollitia vel consequatur cum maxime. Voluptatem maiores modi magni. Et quo molestiae excepturi natus molestias provident. Velit harum tempore commodi cum totam neque alias veritatis voluptates. Commodi magni aperiam dolores error. Ullam libero laborum aliquid voluptate rerum unde quas. Dolore fuga nulla saepe eveniet. Unde in aut unde doloribus quo adipisci suscipit ipsam. Placeat nemo officia beatae. Quis ipsum in quae deserunt. Aliquid ipsum repellat soluta voluptatem ratione distinctio ea.

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