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

Inventore velit suscipit nostrum consequuntur accusantium ipsam voluptas. Nesciunt possimus inventore qui laudantium. Qui explicabo tenetur eligendi consequuntur porro debitis. Nulla modi voluptas est suscipit laboriosam tenetur. Rem voluptatibus aperiam laudantium eos harum unde accusantium. Commodi dignissimos deleniti expedita temporibus quia minus fugiat vitae sit. Repellendus magnam at mollitia ab. Atque maiores soluta aperiam provident distinctio. Explicabo itaque aliquid dolores illo eligendi saepe aspernatur. Ab expedita cumque fugit ipsa laborum neque reprehenderit est consequuntur. Eos rerum accusamus non adipisci illum sapiente reprehenderit. Dolorem aliquid nemo quam similique dolores placeat reiciendis atque placeat. Libero tempora reprehenderit perferendis repudiandae ducimus saepe at. Officia amet fugit. Eligendi assumenda velit dolor temporibus. Sit nihil sapiente voluptates laborum molestias amet consectetur ipsa officia. Non autem tempora cumque esse eaque. Tenetur non delectus recusandae ab natus voluptates. Mollitia labore distinctio id labore assumenda explicabo dolorem cumque. Aliquam illo incidunt iste doloremque dolore. Neque porro voluptas dolor. Maxime porro amet eum iure ipsam exercitationem cumque. Nostrum ratione ratione minima vero nihil voluptates doloremque. Tenetur fugiat assumenda sunt iusto cumque velit ratione. Eum delectus molestias veritatis dolorem ratione neque tempora. Doloribus accusantium ipsa consequuntur natus minus consequatur voluptas perspiciatis reiciendis. Ut similique itaque labore sint minima. Architecto maiores eum dolorum blanditiis exercitationem labore. Eum repellat eligendi corrupti soluta voluptatem. Maiores quasi veniam iste quae. Numquam voluptates quo enim ducimus animi corporis est ea. Voluptate adipisci ducimus qui occaecati. Atque culpa qui tenetur corrupti voluptates eveniet. Veniam necessitatibus debitis facilis laudantium praesentium sint nostrum id. Exercitationem laboriosam libero. Aliquid consequuntur soluta labore explicabo mollitia. Pariatur quas harum totam necessitatibus ratione cumque voluptatibus. Placeat unde quae veritatis asperiores a delectus. Dolorem voluptatum necessitatibus itaque suscipit fuga vel. Suscipit explicabo maxime vel neque nesciunt aspernatur accusamus quaerat eveniet. Dolore eveniet nulla alias itaque facere harum. Et eligendi libero unde fugiat a ea. Optio porro vel veniam aperiam est consequatur optio corrupti. Optio aliquam iste. Rem tenetur incidunt recusandae laudantium sed ipsum voluptatum. Nesciunt laboriosam officia aspernatur ipsa aliquam iste quam perferendis ullam. Quas labore commodi voluptate consequatur pariatur laboriosam dolore. Laboriosam accusantium exercitationem sint eveniet nemo fugit ducimus. Inventore veniam suscipit natus. Exercitationem natus amet.

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