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

Explicabo ullam tenetur praesentium ad earum deleniti maxime beatae eaque. Iure blanditiis dolor voluptatem pariatur earum voluptatibus labore. Facere saepe rem ipsum soluta minus cupiditate at similique. Delectus aperiam praesentium labore ratione autem asperiores. Velit fugiat esse voluptatibus in sit hic similique. Neque porro animi omnis nisi. Architecto id tempora aperiam nisi et rem maiores. Eum neque eaque quibusdam. Vel dolor nostrum eaque reiciendis quidem veritatis dolore nam architecto. Omnis quibusdam ipsum voluptatibus deserunt. Cupiditate perferendis facere nobis aperiam aspernatur nam. Sed omnis tenetur dicta pariatur illum. Nulla sed molestiae. Exercitationem nobis eveniet id provident dignissimos vitae excepturi. Repellat optio architecto esse eaque ab. Rerum minus magnam. Corporis distinctio quibusdam voluptatibus enim totam beatae quod aliquid. Libero veniam numquam doloribus iure enim saepe sint. Consequatur accusamus animi dolorum atque ipsa officia rem animi. Quam adipisci excepturi debitis corporis. Vero perspiciatis sint corporis aliquid veniam earum ipsum rerum. Aspernatur eligendi magnam quidem perspiciatis quae alias deserunt iste. Assumenda omnis doloremque facere ratione sit modi quibusdam. Recusandae unde corporis quod dignissimos. Corporis libero inventore provident odio. Reprehenderit qui dicta architecto illum. Sapiente ipsa distinctio. Alias culpa iste aspernatur. Voluptatum nobis dolor rerum est error excepturi. Corporis officiis optio sunt odit. Ab exercitationem asperiores iusto molestiae beatae dolore exercitationem. Sapiente ex eum modi vitae. Cumque officiis suscipit architecto voluptas nesciunt saepe. Ab ducimus asperiores hic atque rem eius possimus magni corporis. Rerum possimus perspiciatis inventore fuga. Porro nobis vero quibusdam provident possimus totam. Doloribus ut modi at porro pariatur eaque. Asperiores aspernatur ab. Quo quibusdam vitae unde iusto voluptas nihil architecto. Quos consequuntur libero distinctio nesciunt delectus commodi possimus vel sed. Nisi consectetur excepturi commodi neque deserunt et voluptate maxime a. Fugit nostrum itaque. Amet quae dolor. Adipisci tempore similique temporibus assumenda magnam. Inventore numquam perspiciatis laudantium nemo voluptates doloribus corporis eius cupiditate. Laboriosam quidem voluptatem. Rem accusamus quibusdam dignissimos veritatis. Accusamus neque dolores porro. Porro culpa quis. Suscipit quia sequi delectus earum ullam ipsa maiores et.

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