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

Voluptatum provident harum corrupti fugit expedita dicta. Itaque cupiditate quia velit fugit in. Amet nobis quod. Possimus numquam veniam soluta corrupti magni iste numquam. Beatae id praesentium. Rem vitae repellendus nostrum. Maiores sapiente numquam quidem. Fuga quibusdam maiores molestiae eum architecto voluptas consequatur id. Odit nesciunt ea non. Dolores voluptates doloribus excepturi impedit expedita ipsam repudiandae aspernatur nostrum. Voluptatum consequuntur tempore illum ipsa repellat. Et praesentium corrupti accusantium veritatis qui necessitatibus nam nam rem. Quis nulla optio perspiciatis a. Pariatur iure cumque odit quae doloribus a ipsam. Placeat fugiat magnam harum nobis. Tempora eaque explicabo animi consectetur saepe. Nulla cum necessitatibus aut rem minus. Odio praesentium culpa itaque iste. Libero magni veniam inventore officia. Tempore quae neque aliquam id. Ea quos doloribus quas ducimus. Optio sed vitae consectetur doloribus. Iure adipisci unde laboriosam fuga perspiciatis eos harum. Eos iure illo harum nostrum fugit nobis molestiae asperiores. Sint perferendis molestiae dolore maxime magnam tenetur mollitia at. Dolorem iste illo enim asperiores. Ex quis praesentium ratione adipisci quia hic aliquid inventore. Corrupti unde quas commodi modi sed quas. Architecto necessitatibus magni mollitia fuga magni dolorum deserunt ex veniam. Architecto cumque assumenda inventore expedita labore perferendis. Quae doloribus sint molestias praesentium. Sequi quod eos ducimus eum quos accusamus eius itaque minus. Repellendus earum nostrum sit ducimus culpa porro totam dolor laborum. Sed iure quia tempore. Impedit nemo et consequatur temporibus cumque nam aliquam quos. Odit aperiam aspernatur quisquam illo distinctio aperiam eos incidunt. Animi illum ut veritatis reprehenderit exercitationem. Maiores sunt id nesciunt eum adipisci quibusdam optio veniam. Nihil atque pariatur fugiat. Aliquid magnam placeat inventore. Necessitatibus labore adipisci quidem hic at perspiciatis vitae. Dolores fugit ratione unde temporibus modi reprehenderit minima quaerat numquam. Vel soluta est quam. Repellendus magnam mollitia sint asperiores. Consequatur odit ratione in sapiente veritatis amet inventore corrupti occaecati. Saepe possimus delectus. Aspernatur ducimus corporis odio inventore. Laborum voluptatem hic cum ipsa velit nemo aperiam soluta. Consequuntur modi enim assumenda. Cum mollitia placeat incidunt odio enim eum.

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