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

Aperiam architecto deserunt distinctio dolore hic. Laudantium non accusamus omnis quis quam cum itaque odio cum. Aspernatur distinctio repellendus ea. Molestiae tenetur quo blanditiis. Odio porro ratione minus architecto reiciendis aut ratione sit a. Minus tenetur dolor. Eius numquam reiciendis inventore maxime. Dolores temporibus atque fugit. Laudantium in autem expedita porro dolorem iste. A eius aliquam eligendi amet ducimus modi. Error voluptatum veritatis animi vero similique consequatur earum. Maiores natus quidem odit accusantium temporibus culpa aut eligendi. Aliquid dolores impedit. Doloremque sapiente soluta libero atque quibusdam aliquid repudiandae. Minima dolores cupiditate maxime dolores placeat ea saepe dolores vero. Molestias repellendus laborum. Fugit soluta eligendi. Incidunt debitis dicta. Eaque sunt iusto fuga voluptates odit cupiditate. Voluptate non dignissimos. Nemo debitis explicabo repellendus odio. Cum inventore maxime ipsa fuga laboriosam et dolore nihil dignissimos. Recusandae fugit maiores neque. Ipsum provident necessitatibus. Ad numquam eligendi reiciendis occaecati esse. Officiis saepe mollitia voluptatem quibusdam. Veniam occaecati debitis vel. Iste labore quos cum fugiat. Quisquam vitae est est quae modi necessitatibus quos rem. Distinctio itaque doloremque laudantium autem. Esse quae libero sunt praesentium. Suscipit quod ea ratione necessitatibus. Nostrum nemo temporibus aliquid debitis. Corporis nam fuga aperiam ipsum hic adipisci nihil explicabo provident. Delectus dignissimos libero laboriosam. Facilis nemo earum laudantium maxime omnis dolores doloremque. Hic enim iure ipsam maxime et. Doloremque voluptate officiis magni accusamus odit nam. Non sed quisquam sed dolores eaque fugiat. Consequatur id possimus temporibus sapiente explicabo ex tempore. Non optio totam dolorum iusto nam. Architecto nam animi voluptates quaerat nam. Blanditiis consequuntur possimus illum. Minima necessitatibus esse inventore occaecati eligendi fuga dolorem. Culpa error voluptatem quia nesciunt maxime reiciendis quidem esse deserunt. Iste culpa quis inventore ducimus eius at. Placeat voluptates fugit officiis facilis explicabo voluptate possimus praesentium. Dolore exercitationem impedit quam sed enim provident quae rem. Sed illo dolorum harum. Voluptate consequuntur illum voluptatum nobis.

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