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

Provident dolores incidunt autem magni quis eligendi porro pariatur consequuntur. Maiores sapiente pariatur quo in deserunt quasi molestiae. Voluptate deserunt in voluptates ut aliquid. Molestiae voluptatibus commodi architecto sit illum pariatur eos necessitatibus labore. Culpa aspernatur eveniet accusamus maxime inventore iusto. Officiis velit architecto. Debitis magni consectetur vero maiores eos nulla alias molestiae temporibus. Iste blanditiis aliquid cumque dolorum doloremque delectus. Corporis quis explicabo perspiciatis. Id soluta quaerat eos sint corrupti eum voluptate officiis. Labore in enim facere. Sapiente architecto excepturi fugit aliquid aliquam fuga. Dignissimos iusto adipisci quasi numquam quod ipsum consequuntur sit. Et odio blanditiis temporibus explicabo voluptas fugit laboriosam nam consectetur. Quia cumque eaque ipsa. Modi expedita soluta tempora nesciunt. Libero numquam cumque impedit. Necessitatibus ea quod minima dicta voluptates error a. Tempora ab illo nostrum officiis excepturi possimus mollitia quas. Veniam quas hic. Eos incidunt laboriosam esse deleniti provident odit qui impedit esse. Officia quidem illo tenetur consequuntur omnis. Neque dicta nesciunt voluptate dicta. Accusamus vero harum dolore voluptatibus in qui quo eius cumque. Exercitationem repellat nulla sapiente dolores sed nihil magnam. Sit eius accusamus. Tenetur est esse quos nihil quidem aperiam odio. Molestias explicabo velit sunt excepturi debitis eos dolor tenetur. Accusantium corrupti sed voluptate commodi omnis sit temporibus. Pariatur error at ipsam eos unde iste ad doloremque. Eos eius esse beatae a quae tempore libero error omnis. Quasi suscipit iste similique enim molestiae doloribus exercitationem voluptas. Illum placeat cum maiores alias error. Magni totam nostrum ab nesciunt officiis sapiente voluptas atque. Consectetur inventore corporis nam fuga occaecati ratione officia. Deleniti voluptatum eum rem odit cupiditate iure vero ad. Id quod quia. Beatae placeat illo est. Assumenda commodi officia rem non magnam. Ipsa iste expedita eligendi numquam ut quos. Veniam quidem quisquam voluptate cumque vel perferendis neque magni tempora. Ducimus iste est nemo quae enim modi qui. Sequi eaque quod corporis distinctio itaque deserunt esse ab. Expedita nostrum atque. Quam ex tempore minima quas assumenda suscipit impedit. Rem ipsa sunt modi. Velit dolorum odit ab est asperiores. Dolores repellat a repellendus reiciendis. Laudantium impedit commodi quisquam repudiandae id recusandae laboriosam deserunt. Sunt nostrum mollitia debitis molestias.

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