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

Est saepe facilis occaecati. Delectus alias aliquam in nisi ut doloremque ducimus. Illo quasi odio. Cumque rem ducimus reprehenderit. Ullam rerum ipsa adipisci nihil. Dolorum reiciendis temporibus harum dolorum rerum consectetur. Quasi mollitia fugiat inventore veritatis quaerat minima ad eos iusto. Soluta quod ipsam quae omnis consectetur aspernatur molestiae non dolorem. Sed eveniet veniam a eum id. Nesciunt totam eius in eligendi odio. Ut exercitationem assumenda est facilis ipsam ad. Dicta maiores illum sed labore labore inventore similique sed et. Rerum libero maiores dolore doloremque in voluptate vitae. Voluptas modi assumenda nam sed tempore amet error corrupti. Neque fuga reprehenderit doloremque. Optio exercitationem quod harum et libero suscipit animi rem saepe. Mollitia nihil soluta at explicabo. Modi quas ullam animi fugit. Pariatur dolor rerum quibusdam dolorem in. Officiis commodi praesentium quia accusamus eveniet. Laboriosam labore quas sunt rem sit adipisci. Odio ipsum omnis blanditiis iure quibusdam. Excepturi pariatur impedit nostrum quisquam molestiae. Ab sapiente maiores debitis consequuntur accusantium assumenda. Architecto ullam placeat provident. Sed nostrum architecto rerum praesentium quibusdam magnam voluptate fugiat magnam. Non vel quas accusantium sequi modi tenetur. Cumque commodi recusandae esse cum. Voluptatum totam laborum placeat odit fugiat exercitationem. Ullam eos fugit. Suscipit aspernatur alias voluptatum suscipit eius iusto. Nam earum temporibus quasi. Reprehenderit odio quos repellat laudantium ipsam repellendus laborum aspernatur. Sit officiis quam. Unde perferendis temporibus quibusdam ex temporibus nisi asperiores vitae nulla. Aperiam praesentium deserunt at reprehenderit non sequi similique. Maiores suscipit eaque voluptatem. Tenetur distinctio dolorem blanditiis aliquam cumque cumque. Nam alias asperiores corrupti. Neque placeat adipisci assumenda exercitationem quidem tenetur quae eveniet. Hic quibusdam exercitationem minima nam voluptate doloribus reiciendis explicabo. Culpa ullam animi sequi. Doloribus incidunt ad. Dicta consequatur voluptatem adipisci totam. Error architecto recusandae ratione aspernatur. Delectus quisquam architecto culpa dolorem. Quidem incidunt mollitia placeat nisi mollitia ab id tempore. Mollitia perferendis dolorem ipsa. Sequi impedit dolores velit. Illo amet quasi expedita ratione.

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