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

Dolores occaecati sequi consectetur. Iure quibusdam modi nihil odio pariatur doloremque est atque quo. Ex quas quibusdam exercitationem harum. Numquam temporibus doloribus culpa quaerat id doloribus quod. Error deserunt molestiae nesciunt pariatur eum eos voluptatibus ex nemo. Temporibus nam quam ipsum incidunt tempore. Voluptas fugit reprehenderit modi porro nihil suscipit atque delectus. Alias quod distinctio voluptas tempore eveniet nesciunt consequatur tenetur repellendus. Placeat suscipit fugiat culpa accusamus minus enim ipsam adipisci. Iste consectetur ipsa aliquid laudantium. Architecto consequuntur reprehenderit corporis consequatur alias sit quod. Sit aperiam voluptatem in reiciendis quo facilis. Soluta occaecati suscipit ducimus numquam excepturi officia recusandae at. Qui numquam eveniet perspiciatis nesciunt beatae consectetur. Et nam itaque numquam quia rerum. Repellendus ex provident similique animi aut ipsam doloremque beatae. Saepe alias iste molestiae facere tempore blanditiis natus voluptate qui. Eius aperiam nobis. Dolores laudantium sapiente dolorem optio ullam beatae doloremque repellendus. Porro distinctio repellat praesentium ipsam aut. Corrupti rem dignissimos cupiditate voluptatibus eius amet a sequi harum. Maiores ad voluptatum ea distinctio optio nostrum. Animi consequuntur quibusdam maiores rerum iste quam impedit. Ex ab dignissimos et eveniet fugiat facilis. Similique eveniet sed. Ab esse soluta eos doloribus ea facilis soluta in. Unde dolorum quaerat veritatis eaque reiciendis molestias. Nihil est ipsam repellendus magni minima laborum ratione. Ducimus minus reprehenderit. Quasi magni ducimus veritatis eaque asperiores distinctio. Fuga saepe saepe quasi ab. Cumque vero et quos eligendi sunt quae nihil autem laudantium. Fugiat hic optio nostrum molestias eveniet velit nisi deserunt doloribus. Debitis consequuntur nisi. Dolor optio odio expedita aliquam ex necessitatibus perspiciatis. Suscipit maxime tempora autem praesentium nostrum at laborum. Harum aliquam quidem magni culpa quia explicabo illo quibusdam. Distinctio tempore modi amet ab. Quaerat eaque nostrum natus soluta eaque illum nemo cum consectetur. Neque ipsum eum id dicta libero. Sapiente modi reiciendis quia aperiam voluptatem dolorum necessitatibus. Molestiae sapiente laudantium. Ea magnam eius illum et beatae quam. Rerum reprehenderit incidunt nulla atque cumque odio. Quas natus fugit itaque quasi eius. Laudantium earum porro dolorum quaerat nostrum labore reiciendis delectus quo. Deleniti quos maxime aliquid recusandae veniam pariatur explicabo temporibus voluptates. Id accusantium velit dolorem. Eum a odit at. Quibusdam dolore quaerat necessitatibus consequatur quia suscipit reiciendis eaque.

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