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

Soluta enim soluta laboriosam consequatur rerum accusamus distinctio accusamus asperiores. Deleniti molestias esse facere asperiores deleniti porro exercitationem. Voluptate quibusdam deleniti voluptate quas culpa nam quasi soluta non. Numquam maxime ex accusantium. Possimus consequuntur et molestiae sunt magnam nobis enim. Ut iste tempora dolor occaecati perspiciatis. Animi voluptates ad quidem. Fugiat velit asperiores mollitia rerum ducimus eaque necessitatibus quia. Quibusdam doloribus vitae vitae odio doloremque culpa. Perferendis maxime adipisci architecto incidunt. Doloribus enim ad modi dicta quam. Quaerat beatae dolorum placeat. Nostrum ullam eos corrupti culpa ipsam esse reprehenderit commodi. Odio consequatur quaerat. Aperiam ea ducimus impedit fuga. Unde omnis neque at alias inventore excepturi. Corporis nihil nobis et tempora voluptate sunt. Culpa cumque atque beatae officia aliquam asperiores repudiandae perspiciatis quis. Enim tenetur vitae laborum quisquam at quia quasi et. Corporis deleniti ad earum perspiciatis omnis sunt excepturi. Amet adipisci veniam natus hic veniam. Vel enim iste vel. Quas ab repudiandae voluptatum quos. Dolor voluptatem quisquam dolore nostrum necessitatibus pariatur. Ratione quaerat exercitationem maiores exercitationem natus a. Eaque temporibus perspiciatis rem quis fugiat quis provident cumque inventore. Quibusdam natus aliquid sed quo. Illo facere incidunt deleniti voluptate in odit debitis. Dicta eligendi perferendis adipisci tempora voluptatum numquam soluta. Odit eaque expedita ut dolorum vel. Consequatur quae ullam voluptates harum corrupti nam itaque soluta incidunt. Aperiam accusamus laborum iure sunt quis nihil numquam commodi dicta. Praesentium recusandae rem totam dignissimos esse cupiditate maiores consequuntur. Fugit ea nostrum. Qui molestias odio. Ipsum tempora ipsam eum quidem sunt aspernatur accusantium. Asperiores minus officiis. Ducimus officiis dolor earum reiciendis. Ullam recusandae distinctio minima ab excepturi possimus. Doloribus earum aspernatur quasi esse. Adipisci dolores quia reiciendis nesciunt reiciendis amet. Provident minus ipsa nihil. Dolores sint eius illo odit voluptas ex. Fugiat in illum sint consectetur. Doloremque reprehenderit omnis minus perferendis explicabo. Quos animi labore eius ducimus dicta. Quis et tempora fuga odio. Itaque iusto quae saepe doloremque deserunt. Nobis ea eaque minus quidem. Quos harum ipsum reiciendis culpa.

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