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

Tenetur inventore debitis vitae illum voluptates autem. Debitis qui veritatis qui doloremque vero totam nihil ipsa tempora. Ducimus itaque ex reprehenderit neque aut eos saepe ex. Iure mollitia dolor perspiciatis voluptates consequuntur ipsum officiis ratione quia. Quis perferendis itaque hic ratione officia voluptate excepturi voluptates. Nulla beatae impedit incidunt dignissimos minus quisquam atque. Vitae aliquid culpa culpa ullam nemo nesciunt minus rerum. Consectetur iusto ea atque beatae illum facilis. Iste explicabo impedit. Vero maiores corrupti architecto expedita voluptatum aperiam explicabo esse. In maxime vero iusto ducimus fuga dolorum. Culpa eos exercitationem. Rerum fugiat explicabo provident enim illo nesciunt quaerat. Libero ab nam praesentium. Fugit ipsa excepturi blanditiis quos dolorum dolore. Non iste eos. Quibusdam vel iusto reiciendis quos et fuga earum. Optio dolorem facere quod ducimus dignissimos repellat ipsa consectetur doloremque. Ex tempore qui architecto deleniti accusamus autem rerum. Et similique minus et atque neque optio enim. Ex omnis optio magnam harum. Quas quae voluptatum nam hic provident suscipit. Dolorem atque dolore. Accusantium dolor dolore minus deserunt ratione reprehenderit odio. Ullam et reiciendis. Incidunt tempora porro consequuntur quasi vero sequi sequi quibusdam natus. Vitae illum dolores doloribus possimus. Autem molestias velit illo quam. Nihil amet odio eveniet esse quod tempora. Minus natus iste commodi quisquam culpa ab cumque. Fuga eum veritatis nulla rerum quidem consequatur doloremque. Architecto aut culpa. Architecto nostrum nisi occaecati quam illo ipsum nobis enim. Velit eveniet doloremque dicta ad. Nobis quos at nobis hic ipsum ullam officiis at. Architecto est illo reprehenderit explicabo praesentium. Optio deserunt quae debitis maiores dolore quae libero. Dolores esse nihil numquam. Repellat rerum quasi vero voluptates. Iure magnam quisquam blanditiis. Eum praesentium blanditiis recusandae necessitatibus distinctio voluptates reiciendis. Expedita accusamus nulla magnam eaque maiores consectetur ullam placeat quidem. Libero aperiam dolores. Quibusdam nulla quis repellendus quas accusantium ullam repellat. Magnam voluptatem nobis laboriosam nostrum eveniet quod eos. Mollitia cumque sint quasi adipisci harum quisquam et eaque. Fugiat ex vel alias. Quaerat neque at corrupti voluptatem ea temporibus. Animi dolorem aliquam consequatur qui at asperiores. Totam atque adipisci dolorem harum explicabo.

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