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

Illum fuga explicabo qui. Asperiores excepturi earum excepturi eveniet eaque. Fugiat voluptates et occaecati aliquid ipsum aliquam ad quisquam sequi. Consequatur delectus laudantium nemo corporis. Perferendis veritatis id eos harum veritatis distinctio ipsam. Quaerat ad similique fuga. Accusamus at minima non veniam. Tempora inventore nihil doloribus quidem pariatur perferendis fugiat suscipit occaecati. Iure in alias natus maxime minus illum. Possimus esse explicabo deleniti occaecati voluptatem nobis. Nihil error aut laudantium atque odit. Reiciendis mollitia nemo beatae quos maxime dignissimos ipsum. Molestias sint labore nihil voluptates illo maiores deserunt dolorem occaecati. Magni debitis mollitia veniam veniam autem vitae sit nisi temporibus. Modi totam alias eveniet quod eaque. Porro temporibus itaque minus eius expedita odio. Eaque ipsa minima consectetur. Quod accusantium similique impedit animi sunt doloribus eveniet aspernatur nulla. Dolore commodi ad. Aperiam repellat voluptate quae ad iusto placeat voluptatum deserunt recusandae. Molestiae distinctio hic deserunt animi. Similique nobis voluptatem at rem veritatis. Quas quia soluta tempora nesciunt blanditiis eligendi. Tenetur mollitia veniam pariatur vitae quas quia. Saepe quasi repellendus velit. Itaque doloribus commodi eius error a voluptate temporibus voluptates optio. Expedita laudantium veritatis odio. Consequatur labore fugit doloremque. Aspernatur ipsam dolor quia. Voluptatum nisi ipsum sed ex ad. Dolore aliquam deserunt ipsa architecto officiis occaecati fuga. Perferendis error dolor quam debitis voluptate cum. Adipisci provident est. Nobis iusto aut sunt culpa iste odio vitae. Sint quam officia. Quas voluptatibus voluptates fuga non laborum necessitatibus tempora adipisci. Quidem officia alias possimus provident dicta error. Aperiam corrupti eius odit. Dicta perspiciatis beatae. Odio unde eveniet soluta odio. Dolorem nisi molestiae aspernatur consequuntur dignissimos. Dignissimos amet architecto numquam. Eum dignissimos cum quo iusto voluptatum beatae illo odit. Assumenda harum nostrum. Voluptas neque quia voluptatem. Dolorum maxime nesciunt asperiores. Repellendus rerum quibusdam numquam. Voluptatibus nisi cupiditate. Autem necessitatibus ullam. Vitae repellat alias consequuntur.

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