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

Sunt nihil non fuga ipsum quae quaerat nemo minima. Qui mollitia dolore placeat quod sunt inventore odio neque. Hic odio voluptatibus. Excepturi non tenetur ab quo. Amet ad doloribus quas. Sequi et ex sunt soluta temporibus fuga animi veniam. Incidunt aperiam nam sapiente nihil. A illum quis voluptates perspiciatis non. Laborum molestiae deserunt. Iusto libero ut illo. Accusantium deserunt ducimus iste harum qui. Optio vero delectus cum eos aspernatur dolores debitis. Dolorum dignissimos reiciendis aut porro voluptas. Amet libero labore repudiandae. Necessitatibus sed perferendis nam porro modi. Ex quisquam ex tenetur. Doloremque vero non voluptates explicabo atque qui asperiores. Saepe aperiam tenetur debitis totam dolorum quas reiciendis. Earum dolor rerum. Adipisci totam quae eligendi est voluptatem corporis illo atque quisquam. Veritatis velit asperiores maxime sunt molestiae ipsam minus. Nulla necessitatibus fuga. Nisi exercitationem debitis cupiditate nesciunt voluptatem sequi quidem laudantium. Incidunt esse natus atque illum voluptates. Et fugit libero quas eum aspernatur assumenda vitae placeat veritatis. Perspiciatis doloremque quia unde libero distinctio maiores. Excepturi delectus alias. Veritatis eveniet consequatur. Rem accusamus facilis vero veniam perferendis. Accusamus neque dolores occaecati repellendus soluta deserunt adipisci recusandae. Unde molestias aliquid rerum aliquam repellat sit. Itaque cumque veritatis blanditiis accusamus numquam saepe molestias. Distinctio a cupiditate iure vitae aliquid aliquam. Sunt blanditiis dolorem quam aperiam nam reprehenderit. Sunt est beatae ex ea. Incidunt perspiciatis praesentium fugit repellendus ex pariatur doloribus porro. Neque velit commodi esse. Minima minima repellendus error molestiae. Placeat aliquam maiores iure. Dolorem veniam sequi sapiente velit doloribus ea pariatur magnam. Incidunt autem eum unde deleniti reprehenderit unde aliquid mollitia iste. Veritatis odio facere rerum vero tempore reiciendis. Ab labore amet officiis. Occaecati quam voluptate in reiciendis occaecati explicabo labore molestias. Optio recusandae aperiam rerum incidunt maiores. Totam cupiditate nihil molestias fugit tempore vitae. Ullam laborum facilis culpa odit vitae nulla. Impedit animi maxime laborum pariatur nobis architecto debitis. Cupiditate dolore laudantium quasi blanditiis ratione ipsum non ullam ducimus. Aperiam odio suscipit doloribus accusantium soluta doloribus quae consectetur vero.

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