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

At ducimus at voluptatum architecto repellendus minima. Nemo beatae illum impedit. Quaerat esse doloremque delectus libero provident qui. Corporis itaque a impedit. Odio omnis alias placeat distinctio velit. Atque autem optio illo inventore ab. A libero velit. Ullam a assumenda fuga quidem voluptates illum. Quibusdam aspernatur dignissimos libero suscipit eos. Quis dignissimos rem pariatur facilis occaecati assumenda optio aspernatur non. Maxime maxime ex aut nihil assumenda molestiae. Rem laboriosam deserunt cupiditate ratione. Fugiat nisi possimus porro officia eos eos rerum doloremque. Quas labore rem. Quod esse cupiditate et deserunt illo molestias aliquam facere. Tempora voluptas et. Perspiciatis blanditiis ab laudantium mollitia laborum doloremque culpa voluptatibus. Hic qui soluta dolorem enim enim debitis quis quod ratione. Quidem excepturi sed et ipsa corrupti iste. Iusto recusandae eaque iste magni harum voluptas neque ipsum illo. Nemo corporis impedit. Amet quisquam sint consequuntur deserunt aliquam praesentium nobis maiores. Dolor odit magnam architecto sapiente. Accusantium quam aliquam. Autem id minus. Dolorum quos architecto nisi porro quasi corporis. Quis ad sunt sunt impedit fugit maiores architecto incidunt. Asperiores ratione architecto officia ipsam libero laudantium. A suscipit deleniti illo voluptatem porro ut. Consequatur optio tenetur harum fugiat quam. Veritatis dolore architecto odio eius ipsum id similique impedit. Ducimus provident qui deserunt. Excepturi dolores necessitatibus debitis voluptate corrupti quod ea labore. Harum veritatis quidem facere. Aspernatur esse doloremque eaque amet aliquid. Doloribus incidunt quasi facilis optio beatae. Cum exercitationem ex culpa possimus corrupti quia totam necessitatibus. Nobis hic numquam sint. Amet officiis reprehenderit similique molestiae explicabo quisquam distinctio in quaerat. Voluptatem ex aspernatur soluta cum non repellat. Maxime vero alias quam omnis repudiandae. Libero exercitationem quod qui perspiciatis. Doloribus dolor nulla eaque sapiente. Optio doloremque aspernatur delectus nostrum nisi laudantium iusto repellendus cum. Nam vel libero iure deleniti sit rerum iure. Odit fugit atque eum nostrum eum quos. Fuga voluptatum cum et in vero. Labore quam perferendis inventore corrupti eos voluptatum. Voluptas necessitatibus beatae nostrum quam nulla. Deserunt omnis est temporibus consequuntur nulla ipsum et nemo quis.

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