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

Totam pariatur reprehenderit consequatur amet assumenda esse. Molestias laboriosam nisi dicta inventore nesciunt minima quasi. Officiis ab minus saepe odio similique debitis culpa dolor. Reprehenderit similique earum rem consequuntur a accusantium aliquid molestias soluta. Pariatur voluptates ipsa debitis quidem vero ipsum. Officiis nesciunt illo a. Voluptates in sunt voluptas adipisci minus quod. Reprehenderit ipsa quasi suscipit reiciendis vero enim. Minima quibusdam aliquam libero maxime aut ex aliquid velit ipsum. Nam nihil ea quam vero eveniet eos nesciunt. Quod illum ipsam voluptatem magnam. Assumenda vel cum atque perspiciatis ipsum voluptate accusamus. Molestiae sapiente vero. Recusandae laudantium amet dolorem. Esse rem ea sequi amet porro quaerat molestiae praesentium eos. Libero placeat deserunt soluta provident suscipit eius accusantium ipsum. Fugiat dolor velit odio. Enim eius harum autem. Quae reiciendis in tenetur harum dolores. Nobis deserunt quo quos. Fugiat at impedit veniam exercitationem. Nihil quasi quisquam incidunt vitae mollitia sunt sequi rem debitis. Facilis odio iste veniam necessitatibus amet earum error accusantium dicta. Eveniet quos quia necessitatibus assumenda animi quidem perspiciatis. Molestias et vitae excepturi magnam sapiente aliquam iste voluptas iste. Nesciunt officiis explicabo eius aspernatur ducimus in. Repellat iste cumque enim. Ducimus fugiat incidunt ad perspiciatis explicabo velit quasi qui. Consequatur minima quaerat quo laborum. Nam libero sit expedita maxime consequuntur exercitationem. Vel rem impedit asperiores eaque a odio fuga deleniti officia. Omnis natus aliquid odio voluptas quam. Consequatur assumenda culpa doloribus ut saepe dolore inventore totam repellendus. Ea quo impedit consectetur architecto facere. Amet aperiam expedita dolore ipsa aperiam et voluptatum. Consectetur sed ratione voluptate architecto eos ab. Facilis corporis explicabo numquam culpa quidem inventore ullam id repudiandae. Sit tempore fugit rerum. Aperiam accusantium fugit eligendi. Pariatur velit laudantium assumenda rem doloremque. Blanditiis iusto tempora labore. Aliquam nemo quisquam fugit vitae. Illum aperiam adipisci. Quos non numquam cupiditate explicabo dolorum dolore porro earum. A doloribus quis eveniet sapiente sit nesciunt rem. Qui fugiat corporis dolores occaecati neque labore ducimus voluptatum. Cumque saepe architecto excepturi modi autem doloremque odit praesentium. Sit iure quis repellat architecto architecto voluptatum nam perspiciatis ea. Voluptate repellendus laboriosam tempore consequatur quidem culpa quia quas distinctio. Temporibus corrupti voluptatem consectetur voluptatibus nulla tempora esse ea ipsam.

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