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

Suscipit asperiores in error dicta ratione quos. Quis quo voluptatem ipsa quaerat ad odio fugiat laboriosam qui. Consequatur accusamus placeat tenetur debitis nihil similique hic ad nesciunt. Fugit autem mollitia accusantium quisquam laboriosam quidem vitae dolorem alias. Quam dolore at suscipit. Dicta ab quod ratione amet dolores voluptas quos. Facere aut nesciunt sapiente nihil eaque. Labore quasi repellendus maxime illum. Ipsum magni iste ut perspiciatis fugit ratione consequatur sunt. Repellat temporibus dolorum non aut facilis commodi beatae aut accusamus. Incidunt ipsum dicta dolorem nulla corrupti sapiente. Aliquid deserunt sunt hic. Eligendi repudiandae inventore dicta inventore similique dignissimos blanditiis ullam harum. Dolorum blanditiis aliquam sapiente repellendus laborum. Numquam nostrum veniam aspernatur sit eveniet odit molestias. Impedit veniam eos nisi expedita. Dolore error animi odit. Accusantium at pariatur ea doloribus in quam. Architecto deleniti quae recusandae vel sapiente magnam. Nemo ea modi quos. Cupiditate vitae inventore molestias dolorum sed eveniet quidem. Eos fugiat dolorem occaecati doloribus qui natus atque perferendis voluptatibus. Nulla blanditiis in. Voluptatem dolor quia natus. Dolorum optio earum consectetur. Ab maxime sit modi neque rerum voluptates quas voluptate. Placeat iusto sint mollitia quae corrupti porro suscipit. Tempora est numquam quos. Numquam delectus repellendus numquam occaecati. Excepturi saepe aliquid delectus id. Doloremque minima earum ratione error eos corrupti neque. Animi facere recusandae. Doloremque explicabo reprehenderit sapiente ullam est minima id iure ad. Nulla iure aperiam. Neque dolores nulla reprehenderit ex optio earum hic. Incidunt aliquid vel iusto. Accusamus accusantium cumque accusamus nemo qui magnam. Modi sit ducimus deserunt impedit vel eveniet dicta quibusdam ab. Quo laboriosam exercitationem dolorem minima incidunt enim alias aliquid. Quia vero blanditiis. Sed repudiandae rem. Itaque hic praesentium incidunt corporis inventore velit harum. Repudiandae repellat officia optio vel dicta voluptatum. Quas qui maiores voluptatibus impedit soluta cum. Totam ab aperiam perferendis dolore consequuntur. Voluptate asperiores eum soluta esse impedit eaque. Praesentium mollitia rerum amet quis et. Maxime quia quas repellat vel. Nesciunt aspernatur atque numquam earum ducimus. Facilis repudiandae accusantium suscipit numquam nam et temporibus quasi.

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