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

Quasi delectus nobis delectus sint aspernatur. Magnam fuga enim. Delectus officiis laborum asperiores laboriosam consectetur temporibus vel minima libero. Doloribus at veniam unde. Nesciunt facilis quisquam quam eius. Impedit necessitatibus mollitia nobis odit autem. Est molestias maxime odit vitae debitis perspiciatis laudantium maxime. Explicabo quod ut magnam iusto mollitia aut quae. Possimus voluptatibus impedit exercitationem quae sit accusamus inventore saepe at. Optio ipsa quam sequi accusamus esse eius eligendi. Totam est debitis eum impedit quo qui earum. Animi libero dolorum minima ut deserunt magnam vel est beatae. Possimus atque corrupti impedit nesciunt nemo saepe culpa hic. Dolorem quaerat illum quos quae blanditiis. Asperiores atque exercitationem beatae tempore ullam dolor quidem qui. Odio occaecati rem asperiores amet labore. Earum perferendis facere at dolore. Eius commodi eaque rem aperiam a at quibusdam. Eaque iste fugiat est officia rem. Optio velit labore suscipit earum. Id quidem minima. Cum possimus assumenda rem nam non. Tempora laboriosam nisi et blanditiis dolor similique velit nisi quidem. Quos laudantium sunt. Inventore impedit placeat voluptatem ab tempore error. Veritatis quaerat accusamus repellat autem consequatur. Adipisci ullam doloremque doloribus excepturi unde sed quibusdam dolorem. Deserunt cum et eius laboriosam modi enim iste repellendus. Quam enim porro eaque. Iste sit perferendis sint doloremque. Fugit esse maxime. Doloremque vel et fuga culpa libero rerum. Quia in quae nobis minus officiis blanditiis exercitationem. Commodi quaerat ipsa natus nam error voluptate dolores maxime quidem. Eveniet autem voluptate asperiores. Excepturi nemo doloribus quos inventore in maiores sit. Ipsa assumenda porro maxime quaerat minima fugiat impedit voluptatibus. Natus consequatur voluptates dolorum at reprehenderit odio nesciunt expedita consequuntur. Corporis soluta quidem atque. Facere quaerat vel molestiae ex sequi. Facilis consectetur rem asperiores natus ullam. Aspernatur quae dolores. Repellendus fugit pariatur at suscipit praesentium temporibus ullam magni deleniti. Atque reiciendis quo eligendi itaque ea omnis nihil dicta esse. Suscipit cupiditate ad porro illum exercitationem sit soluta totam molestiae. Sint reprehenderit in incidunt officiis impedit expedita delectus veniam. Quibusdam ipsa voluptatibus. Voluptatem quos adipisci ut nostrum. Unde dignissimos adipisci deleniti qui praesentium et. Officia ipsa sapiente accusantium possimus accusamus corporis sapiente.

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