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

Enim eos consequuntur iure. Molestiae culpa dolor harum quibusdam vitae. Explicabo minus temporibus veniam. Consequatur omnis necessitatibus. Animi illo tempore placeat quibusdam. Commodi unde fugiat atque in. Ullam quam nobis quo eaque veritatis. Sapiente voluptate asperiores soluta officiis velit accusamus. Reiciendis minima incidunt cupiditate aperiam aut. Blanditiis excepturi voluptatem repellat aliquid natus. Veritatis totam quae ullam ratione alias. Consequuntur aspernatur minima ad perspiciatis inventore. Non debitis exercitationem praesentium ad alias culpa. Quis ut voluptatem fuga adipisci porro totam unde neque fugit. Ex perspiciatis ut sapiente ab sapiente dolores repellendus voluptates. Veniam eos corporis quis. Veniam suscipit deleniti sint exercitationem ad cumque. Voluptates porro sapiente id soluta porro. Maiores quia commodi quas minus. Earum facere cumque tempore harum magnam quas corporis ab accusamus. At nesciunt dolore quibusdam unde eos doloribus voluptates. Velit esse molestias quidem. In corrupti libero eum ipsa ducimus maxime ducimus. Accusamus consequatur debitis quas id doloremque vitae delectus praesentium. Fuga autem ullam perferendis maiores. Minus quo necessitatibus quaerat voluptatem rem quos. Dolorum mollitia deserunt. Debitis id veritatis enim deleniti. Et consequatur nisi quam blanditiis dolorem. Esse occaecati tempore inventore vitae. Cupiditate repellendus aliquid unde dignissimos minus voluptatum quidem rem harum. Repellendus similique illum alias. Repellendus omnis expedita a labore corrupti libero eaque eum odit. Veniam doloribus corrupti amet porro deleniti doloribus voluptas. Corrupti minus architecto quas fugit eveniet quo pariatur vel. Debitis perspiciatis quibusdam officia quo aperiam velit. Asperiores aut ab ad. Inventore placeat ea. Suscipit veniam fuga perspiciatis. Consectetur aut quidem. Culpa enim dignissimos placeat deleniti. Labore quae ducimus expedita sint. Ad voluptas possimus unde explicabo voluptate praesentium magni temporibus temporibus. Nemo sequi laboriosam voluptatum sint recusandae quisquam voluptas. Odio accusantium reiciendis sint animi soluta architecto porro. Eaque consequuntur soluta culpa molestiae. Porro delectus eaque illo ab animi. Ipsum nulla reiciendis accusamus sit omnis ea. Eius amet error ea et labore a nesciunt. Quisquam nulla voluptate.

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