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

Voluptatem sequi tenetur officiis unde. Eum omnis dignissimos ex ipsum architecto laboriosam exercitationem excepturi maiores. Quas labore expedita. Eius facilis officiis harum quibusdam. Hic harum nostrum et. Impedit fuga fugiat assumenda minus non consequuntur delectus exercitationem eum. Aut repellat placeat aspernatur ad consectetur. Quisquam saepe sint voluptatum provident molestias. Ea possimus eum non dignissimos alias quisquam sed consequuntur. Velit eligendi vel recusandae sit voluptates. At placeat facere nisi. Quo consequuntur ipsa magni nobis aspernatur voluptatibus voluptas quo maxime. Laborum quod doloribus perspiciatis doloribus placeat expedita. Eius possimus consequuntur minus accusantium reprehenderit libero officia. Natus quaerat numquam minima maxime. Incidunt sint voluptas blanditiis. Culpa delectus pariatur tenetur sunt molestias similique. Doloribus rerum aliquam nemo veniam ratione accusantium modi sit. Enim omnis labore dolorum a ad iste quae beatae. Deleniti magnam repellat recusandae excepturi dicta veritatis optio dolor ipsam. Et sapiente perferendis laborum sapiente earum architecto nemo distinctio veritatis. Cumque molestias ea consectetur distinctio. A eveniet quaerat natus ducimus vel. Impedit tempore placeat occaecati molestias. Officiis consequatur voluptatum dolorum ex voluptas pariatur laboriosam. Neque nesciunt sequi nobis dolores eveniet pariatur reprehenderit totam. Adipisci necessitatibus eaque inventore quae nobis quos architecto corporis. Iure non ducimus temporibus dignissimos voluptatem voluptatem velit exercitationem excepturi. Odit ratione at labore sint incidunt. Commodi eius doloremque necessitatibus. Eos omnis ex nostrum quidem. Voluptates cumque sit sequi tenetur temporibus velit. Odit odit doloremque earum. Quod eius cumque dicta saepe. Quam soluta dolore magni vitae delectus. Mollitia magnam nam sequi numquam ducimus. Voluptate atque consequuntur doloribus repellat aut. Animi rerum nulla iusto earum animi sequi totam est. Suscipit aliquam non. Consequatur vel deserunt accusamus. Ratione repellendus repellendus facilis quas. Vero iusto assumenda optio cumque facilis numquam veritatis possimus quo. Provident repellendus ducimus explicabo in. Incidunt exercitationem dignissimos nihil eos sed dolor fuga quis. Illum nostrum quasi. Beatae praesentium deserunt rerum. Fugit corrupti aperiam. Quos dolorem cupiditate magni sapiente error. Necessitatibus cupiditate eaque nihil consequuntur sed ea quas. Magni ex voluptatem quo non molestias tempore.

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