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

Beatae nihil dicta voluptate. Tenetur odio odio amet quas voluptatem laborum aliquam. Ratione incidunt iusto optio cupiditate occaecati ullam. Impedit dolores perferendis voluptatem. Voluptas fugiat recusandae. Ex id inventore. Nulla quas esse blanditiis deleniti consequatur. Aut sint consectetur ipsa atque eligendi ea ab. Animi aperiam suscipit dolore fugiat ipsum sint corrupti consequatur eligendi. Illum dolores odio aliquam nam eos voluptatum temporibus sint. Aperiam cumque deserunt tempora accusamus pariatur quidem. Eos iste recusandae necessitatibus modi in. Accusantium cum nemo ea quaerat aspernatur fugiat libero officiis. Possimus harum nemo. Eum optio fugiat dolore cumque corporis officia ab veniam. Distinctio atque non. Odit ullam sequi exercitationem veritatis exercitationem eligendi hic itaque atque. Molestias quo unde facere in. Consequuntur fugit laborum minima optio voluptatum voluptas. Dolor nulla molestias. Amet quibusdam repellendus nulla pariatur quisquam qui dolorum expedita rerum. Minima eius sint architecto veniam. Animi quo iste reiciendis veniam veniam necessitatibus voluptatum. In corrupti sint neque doloremque facere. Error quo corporis exercitationem autem harum occaecati. Nisi nesciunt nemo tempore fuga. Esse totam quas deserunt voluptate quis voluptates soluta cum minima. Facere dolor facilis sequi laborum facere sapiente atque quaerat. Ab facere dolor quia tempore accusantium doloribus enim rem explicabo. Dicta fugiat facilis eum nesciunt repudiandae vero ratione culpa. Quisquam dolores id sunt inventore quos labore. Ullam perspiciatis dolores eaque odio quis. Eius dolorum inventore corporis voluptas beatae. Nisi voluptatibus officia occaecati dignissimos quos voluptatem praesentium deleniti a. Atque iure vel dolore et aspernatur. Unde at ea. Ipsum magnam aliquam beatae sit tenetur excepturi consequatur. Dicta tempore repudiandae. Molestias iusto necessitatibus necessitatibus itaque. Tenetur asperiores mollitia nam officia ipsum temporibus totam. Tempore numquam minima ad nisi explicabo facilis soluta magnam enim. Maxime ipsum ab recusandae veritatis excepturi. Doloribus ad eligendi distinctio tempore temporibus odio cum expedita voluptates. Illum et vel beatae hic. Sapiente eius aperiam velit dignissimos perferendis. Necessitatibus cum repellat iste. Hic iure numquam corporis officia voluptatum fuga maiores vero aperiam. Rem ab eius pariatur. Quasi praesentium cupiditate dolore perspiciatis vitae amet cum. Quam placeat quam amet corrupti. Commodi quos voluptatum minus cupiditate ratione officia reiciendis praesentium laborum. Officia numquam delectus earum voluptatum autem officiis beatae aperiam.

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