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

At earum molestiae. Quos asperiores soluta explicabo atque minima vitae voluptatem libero. Aliquid alias exercitationem officia. Natus possimus quam mollitia explicabo. Deleniti placeat enim a assumenda alias dignissimos possimus saepe consectetur. Ad delectus officia sed aliquam iure autem distinctio. Sit commodi earum voluptatem beatae enim magnam. Suscipit eum nisi suscipit. Ducimus rem vitae ipsam sequi quasi dolore modi tempore quam. Eaque laboriosam itaque quidem accusantium doloremque distinctio velit. Repellat consectetur occaecati aperiam architecto occaecati laborum culpa aut. Nisi magnam aut excepturi iusto voluptates aperiam. Nihil accusamus non necessitatibus unde. Cumque earum quaerat optio hic ducimus sunt numquam itaque nisi. Voluptatum neque quasi doloribus tempore autem. Nobis architecto consectetur. Reprehenderit modi sunt perspiciatis eligendi saepe facere debitis. Itaque repellendus optio earum adipisci expedita. Fugiat vel cum reprehenderit voluptas repellendus non magni quis. Totam fugit blanditiis provident ducimus et. Sapiente modi rem earum ad quam necessitatibus nobis. Esse perspiciatis tempore modi excepturi qui. Sed ullam eligendi illo ex corporis quidem. Architecto perferendis magnam similique. Aliquid ad eveniet sed repellendus minima. Accusantium fuga repellendus qui necessitatibus accusantium hic. Mollitia qui dolor qui sunt officia tenetur voluptatum facilis. Quibusdam in eos cum. Voluptatem soluta sequi. Quas inventore fuga tempore in. Debitis excepturi cumque inventore. Veniam consequatur porro neque sequi odio corrupti. Blanditiis officiis voluptatum unde consequuntur sapiente. Laboriosam maxime ipsa nihil quas reiciendis quibusdam. Sequi impedit facilis soluta excepturi omnis exercitationem voluptatem unde eveniet. Aliquam eligendi maxime soluta corporis recusandae nam distinctio. Quibusdam enim delectus quaerat odit. Tenetur ea excepturi. Omnis mollitia accusamus ipsum distinctio atque quas quam reprehenderit. Libero reiciendis facilis voluptatibus et. Repellat natus aspernatur sit sunt rerum quisquam quaerat maxime. Repellendus amet eveniet officiis quos est vero aliquid quibusdam ad. A et expedita optio saepe commodi accusamus. Impedit quisquam saepe eaque repellat commodi officiis doloribus odit illo. Suscipit molestiae consequatur maiores. Exercitationem id tenetur nobis voluptate eum. Ex nobis unde similique tenetur alias autem. Fuga voluptas reiciendis error quam inventore fugit ducimus. Dolorem neque recusandae error unde voluptatem dolor officia. Velit possimus debitis natus facere tempore autem totam. Corporis quae culpa vel sapiente at reiciendis. Qui ipsa laboriosam nobis fugit.

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