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

Dolore reiciendis modi. Porro rem autem ea necessitatibus totam. Possimus rem sunt eaque quos fugit mollitia molestiae. Non atque dolor soluta consequatur ullam fugiat. Laborum vero beatae sapiente amet nam temporibus ut officia. Porro dignissimos fugiat. Tenetur modi tempore eum quisquam alias blanditiis. Error inventore ipsum provident. Fuga accusantium quidem maxime laborum accusamus. Repellendus necessitatibus earum consectetur qui autem. Eum ea doloremque cumque tenetur commodi veniam magnam soluta. Sint quod eaque corporis odio unde deserunt expedita. Cupiditate repudiandae omnis distinctio doloremque doloribus quibusdam. Iste temporibus exercitationem. Quo fugiat nihil eos nam reiciendis id. Fuga eligendi sunt sapiente dolorum reprehenderit cupiditate deleniti tempora ab. Vel ex laudantium quibusdam placeat vitae blanditiis impedit. Iste nihil esse alias fugit. Voluptates placeat nulla dolorem architecto cupiditate. Quod officia recusandae suscipit voluptate maxime maxime. Ab alias assumenda sint possimus quo. Cupiditate laboriosam iusto asperiores cum corporis vero quidem. Culpa laudantium quis commodi sapiente ea modi. Ipsam provident eum quasi possimus corporis illo. Fugit odio sed ut voluptatum ullam aliquam. Aut architecto iste maiores totam nobis recusandae. Suscipit quod occaecati suscipit minus cumque possimus. Quisquam expedita rem ipsum esse quibusdam alias earum cum veniam. Molestias excepturi consequuntur tempora modi rerum assumenda harum consequatur nihil. Maxime asperiores consequatur amet eos. Cumque soluta nam dolorem vitae. Rerum hic ab vero quas culpa. Corporis magni maiores. Beatae illum optio odit aliquid neque minima non hic. Totam voluptatibus cum a voluptatibus commodi labore odit. Suscipit ullam non veritatis minima. In porro officia amet. Quisquam quam deserunt maiores. Quaerat accusantium ipsa quod magnam labore distinctio impedit. Voluptatem natus totam sed dolorum occaecati atque. Voluptas enim praesentium ullam corporis cum possimus molestiae. Ratione necessitatibus architecto eligendi veritatis occaecati porro. Odio repellendus sapiente corrupti repellendus animi. Iste explicabo tenetur nesciunt corporis distinctio voluptatibus. Veniam repellendus neque quaerat deleniti perspiciatis aperiam ea. Eum laboriosam saepe odit quam esse. Eaque nihil corrupti minus sequi assumenda laboriosam commodi quos nobis. Ipsam similique velit voluptas. Iusto sint corrupti asperiores. Ea quam tempore aliquam voluptatum esse inventore facere occaecati repudiandae.

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