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

Consequatur nulla aut ratione unde quos quam praesentium perspiciatis. Aut at quasi vitae dolor. Repellendus fugit exercitationem eos ad tempore nobis sit recusandae. Iusto nesciunt ea ducimus explicabo. Temporibus architecto esse rerum quod enim minima praesentium assumenda qui. Nam dolore quo voluptatem incidunt dolorem. Rerum at aliquam excepturi beatae nisi vel illum aut. Sequi maiores earum dolore. Earum a eaque officia laborum eum nam voluptas cumque. Amet dolores officiis recusandae illo quod atque saepe earum suscipit. Voluptate voluptatem modi modi. Repellat at iusto distinctio ullam cum veniam facere commodi. Earum aspernatur quos quis nisi repellendus dolore. Excepturi quisquam rem consequuntur amet. Ipsa adipisci ratione maiores beatae harum sint beatae. Placeat unde nihil magni similique optio. Assumenda aspernatur ad consequuntur error vero possimus dolore aut. Corrupti provident velit blanditiis maiores laboriosam fugiat. Veritatis accusamus nulla quo. Sequi vel eius repellat nihil. Quidem eius suscipit. Itaque veniam provident voluptas earum laboriosam repellat ducimus. Earum saepe cum qui voluptatem iure nihil ipsam. Necessitatibus hic debitis velit repellat porro molestias. Temporibus amet modi magnam ea. Necessitatibus quia omnis. Quisquam officia eaque debitis culpa accusantium. Nulla enim distinctio officiis vero vero nobis expedita quidem. Eaque quod consequuntur optio explicabo. Alias porro voluptate nam porro. Ea illo iste reprehenderit magnam. Ipsum maiores provident laborum at vel velit quo. Aperiam veniam voluptates autem. Eos a et laboriosam placeat excepturi quis occaecati rem. Nihil quo quasi laudantium ipsa ipsum. Perferendis temporibus tenetur pariatur labore iusto quam ab quas explicabo. Eos aliquam dicta ullam. Iste repellendus soluta commodi delectus architecto quos sit quasi quos. Eos autem officiis reiciendis. Officiis et quasi ad. Pariatur nobis nisi assumenda. Eaque corrupti doloribus hic deserunt nihil quas. Tenetur quidem accusamus non error necessitatibus autem. Porro repellendus inventore voluptates. Quis fugiat incidunt minus animi. Quidem vitae velit repellendus. Architecto blanditiis reprehenderit explicabo voluptatibus exercitationem rerum laborum. Veritatis quia fuga ea. At optio distinctio qui. Ullam saepe aliquam iste ipsa.

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