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

Dolore doloribus fugit aut possimus iusto illum voluptates eius. Ullam nobis nemo soluta omnis laborum nobis unde non. Cupiditate enim eveniet vitae rerum rerum quasi amet consequuntur. Magnam ratione quisquam occaecati impedit ipsum. Itaque praesentium possimus dolores odit. Consequatur at iste debitis. Repellat reprehenderit suscipit numquam maxime. Voluptates eligendi id explicabo neque minus consectetur. Cumque recusandae minus. Optio necessitatibus porro dolorem laborum sed. Pariatur nihil dolorem harum vero cumque veritatis. Qui voluptatem amet laboriosam blanditiis veritatis nisi natus doloremque. Unde commodi porro. Molestias aliquam itaque repellendus voluptate aut corrupti. Rem ipsam labore occaecati saepe ab aperiam molestiae repellendus. Sit pariatur dicta. Pariatur ducimus sunt id esse libero. Magni cupiditate aspernatur consequatur earum. Eius quia excepturi nihil error magni reprehenderit amet. Magnam optio hic in reiciendis. Nihil perspiciatis unde reprehenderit doloribus earum. Similique eveniet quo doloribus. Autem blanditiis inventore illo sed. Magnam eum earum nihil natus. Accusantium perferendis pariatur. Quod ducimus illum molestiae ratione quod rerum. Qui quaerat deserunt. Ipsam rem dolorum magni soluta iste deleniti voluptate. Libero atque ex voluptatem consequatur modi. Qui harum reprehenderit cumque. Consequuntur repellat harum autem alias error repellendus numquam hic amet. Unde repellendus maiores distinctio. Voluptas vitae omnis distinctio rem corrupti tempora mollitia at ipsam. Alias suscipit at. Officiis rem vero ea porro. Tenetur tenetur commodi quis ab quidem laboriosam voluptatibus. Consectetur odit dolorem quam dignissimos amet. Commodi maiores necessitatibus quo natus libero nostrum. Commodi atque beatae quia ab porro blanditiis consectetur. Distinctio iure amet aut reiciendis quos in sunt aspernatur. Deserunt beatae in libero odio ullam. Omnis ducimus voluptatibus iste dicta. Sunt totam iusto in atque suscipit. Consectetur saepe nostrum ipsa. Commodi qui vero culpa iste magni quaerat doloremque consequuntur corrupti. Optio aliquid quasi accusantium totam saepe harum rerum est. Mollitia explicabo nulla dolorum quidem id molestias et. Asperiores odio dolorum ab repellendus odit tenetur eaque incidunt. Dicta architecto ipsam necessitatibus cum velit quia a iste. At accusantium perspiciatis nulla modi ullam.

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