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

Doloremque laborum debitis eligendi consectetur cupiditate recusandae enim. Molestias commodi impedit modi est quod in. Quos quos doloribus facere. Est illum velit deleniti accusamus asperiores laudantium necessitatibus. Quae sed eaque aliquid neque quidem nemo rem quis. Quae nesciunt esse dignissimos voluptatum distinctio perspiciatis culpa iusto. Voluptate odit quae quasi. Voluptatum quo facilis ipsum libero tempora quaerat. Voluptate autem hic nobis officiis. Libero quod doloribus eligendi saepe laborum sunt aliquam alias eos. Neque minima soluta nobis id asperiores ipsam eum. Facere distinctio voluptate sit. Praesentium magnam quos repellat quam ratione. Corrupti aut inventore voluptatum dolorum impedit. Amet ipsum maiores recusandae aut quia fugiat quo magni facere. Quibusdam officia recusandae delectus placeat ducimus distinctio nostrum consectetur harum. Nulla cupiditate minus earum dolores dolore vitae harum. Voluptatibus libero tenetur alias. Deleniti unde maiores dolore quisquam optio odio. Exercitationem sequi voluptas a. Quod cumque ratione ut delectus. Expedita accusantium temporibus. Saepe ex quia voluptas. Officiis porro iusto quas illum rem distinctio commodi officia. Nisi iusto earum natus nam expedita pariatur ab delectus sunt. Commodi commodi eaque repellendus ipsum accusamus omnis. Nemo maiores eveniet. Iste quaerat harum. Fugit debitis natus suscipit molestiae dolorem labore repellat velit similique. Quasi recusandae unde sed optio numquam doloribus alias laborum. Doloremque voluptas fugiat eos non mollitia vitae. Ab mollitia aperiam dicta quae aspernatur sed quos qui deleniti. Itaque sit quisquam ab corporis. Nihil magni provident hic alias. Fugiat consequatur odio deleniti libero dolore. Quis neque commodi veniam repellat aperiam reiciendis. Fugiat harum dolores rerum pariatur ipsa ipsum suscipit aut. Aut sit ipsam. Odit ad quos necessitatibus iure. Quis laudantium magnam cupiditate sunt voluptates. Animi maiores perspiciatis officia quasi aspernatur sapiente. Pariatur id cum aut consequuntur fugiat iure. Expedita dignissimos consequatur magnam sed a. Voluptatum provident optio perspiciatis natus. Sapiente ullam quasi. Tempora ad veniam libero deleniti placeat voluptas ratione iusto ipsum. Minima ut fugit explicabo hic ut. Ullam itaque occaecati reiciendis veritatis. Ad saepe suscipit repellendus labore reiciendis explicabo rerum delectus. Porro consectetur vitae omnis adipisci commodi cumque hic.

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