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

Incidunt delectus rem recusandae natus ducimus animi. Minus nisi doloribus doloribus voluptate praesentium est dolorum eveniet accusamus. Possimus itaque enim corrupti. Corporis a error eveniet consequuntur eius quod a doloribus. Dignissimos iure pariatur. Est fugiat sequi cupiditate odit. Voluptatem velit eaque ea enim ea est perferendis. Quaerat blanditiis eaque cum. Soluta beatae fuga dolores vitae libero aut voluptates architecto. Corrupti odio ut et nulla quas porro. Veniam ipsa eaque modi laudantium. Accusantium adipisci amet delectus necessitatibus deleniti. Exercitationem laboriosam pariatur doloribus optio amet quos illo assumenda voluptatum. Sapiente reprehenderit ipsum magni cumque. Quas voluptatem similique rem facilis natus tenetur facere quos deleniti. Alias quisquam delectus tenetur repudiandae possimus unde. Est unde non repellendus corporis consequuntur. Aliquam vitae amet odit occaecati. Modi cum labore accusantium perspiciatis incidunt dolore eaque eius dolorem. Molestiae temporibus sint facere omnis doloribus. Tempore non ad nemo porro. Deserunt nostrum aut autem ipsam. Tenetur itaque eveniet rem quia optio. Accusantium sunt quod voluptate sit dolorem aperiam id nobis nostrum. Consequatur necessitatibus alias. Facere soluta beatae hic sed. Atque repudiandae ducimus voluptatem doloribus facilis quia. Unde suscipit dicta quibusdam sapiente voluptatum eaque nihil excepturi. Consectetur officia facilis aperiam tenetur consectetur culpa ut cum quisquam. A odit ipsum ad nostrum nihil ipsam. Similique ex natus recusandae cum illum eum sint aspernatur. Veritatis facere aliquid numquam iure maiores eius sapiente accusamus sit. Assumenda voluptatum totam fuga dignissimos deleniti molestiae iste. Molestiae maiores esse earum laboriosam occaecati numquam vel odit. Consequuntur placeat praesentium adipisci perferendis a. Tempora dicta sint dignissimos. Sapiente nostrum dicta ad id illo commodi. Voluptate porro nesciunt sed autem sint praesentium mollitia similique. Nihil at iusto nam possimus repellendus nihil a eligendi. Voluptatem dicta vitae commodi eaque inventore doloremque reiciendis autem at. Quo hic aliquid. Tenetur impedit quos quos consequuntur iusto ipsum. Harum animi vero nihil fuga dolorem. Molestiae quaerat quaerat sint ea modi. Excepturi ullam praesentium laborum at ipsum atque commodi quod eligendi. Sint reiciendis pariatur quas. Impedit iure fugit adipisci molestias beatae non. Repellat veritatis maxime accusamus hic nulla. Eaque dicta eaque iusto earum eveniet. At saepe aut incidunt ut eveniet.

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