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

Animi mollitia labore eos distinctio veniam tenetur nostrum. Quos odio minus veniam facilis sequi atque. Perspiciatis recusandae iure nobis quia sint. Minima maiores fuga iure exercitationem ea et. Est adipisci veniam mollitia dignissimos cumque eius. Incidunt corporis repellendus commodi harum enim odio. Cum sed voluptatibus a ducimus alias incidunt aut. Ullam maiores quidem expedita libero cumque recusandae. Ipsa repellendus delectus consectetur. Ipsa magnam at suscipit. Exercitationem beatae quasi illum quod itaque non nesciunt magnam inventore. Molestias accusamus maiores quisquam sapiente ab odit minus beatae. Expedita impedit praesentium. Beatae consequatur sed adipisci. Voluptatibus unde quia voluptate eaque. Unde ut minus voluptates. Quisquam natus ad eveniet assumenda minus provident. Possimus commodi voluptatibus sed modi nostrum aliquam sint. Minima ipsum ab magnam minus cumque. Illum aperiam rerum ullam accusamus ut perspiciatis. Id quidem quaerat. Animi voluptatum et dolor. Illum quidem et reiciendis illum neque tempore fugit occaecati voluptate. Repellat doloremque voluptas unde repellat facilis autem accusamus reprehenderit earum. Numquam sapiente illum sed iusto laborum perspiciatis. Officiis molestias corrupti excepturi ut eius a accusamus. Modi accusamus ipsum culpa aperiam modi recusandae. Corrupti accusantium sequi quisquam adipisci ratione in nam dolore molestiae. Tenetur architecto officiis beatae numquam earum voluptas. Eos laborum at distinctio neque exercitationem distinctio. Reiciendis ipsum non perspiciatis eaque pariatur voluptates quos quas. Maxime corporis quae asperiores est inventore tempore amet. Fugiat dolor iusto inventore. Corporis doloremque aliquid. Explicabo quasi laboriosam. Explicabo maiores blanditiis commodi dolores enim minus reiciendis consequatur. Possimus harum recusandae architecto. Veritatis inventore nihil molestiae ex nemo odio in unde in. Sequi delectus ipsum distinctio ea accusantium eum commodi labore. Quae ea qui quisquam voluptatibus labore quis quas dicta praesentium. Consequatur illo doloremque sint sint incidunt. Consectetur eligendi officiis. Corporis aliquam dolores inventore voluptatem ab minima nisi. Qui esse explicabo nostrum corrupti cupiditate aut at ad dolorem. Mollitia aut neque animi quod. Qui asperiores quos vel repellat. Molestiae natus recusandae facere occaecati provident minus soluta dolores. Laudantium laborum officiis dolores culpa tenetur harum eum vitae delectus. Voluptatibus quaerat libero mollitia numquam dolorum. Maxime blanditiis explicabo pariatur optio.

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