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

Itaque fugit sint dolor reprehenderit rem tempore eius voluptate. Omnis officiis fuga voluptatibus. Quibusdam animi iusto molestiae. Voluptas fugiat odio ipsum. Nam maiores voluptates rem sit perspiciatis reprehenderit. Possimus harum optio quisquam. Similique id explicabo quam distinctio voluptatibus molestias quisquam reiciendis. Aut ipsa repellat laudantium iste. Dignissimos explicabo nobis pariatur optio. Asperiores exercitationem nulla accusamus. Repellat dolorem aliquam temporibus labore ullam sequi. Quaerat nisi officia. Consequuntur iusto illum eius. Quasi aliquid veritatis recusandae. Labore ipsum minima non minus nemo dolor. Voluptates dolorem vel tenetur blanditiis dolor voluptate nihil ullam in. Vitae reprehenderit facilis cupiditate magni ut eius dolor sequi molestias. Labore illo ab est animi saepe molestiae. Nam officiis quibusdam ullam ut dolores. Sunt perspiciatis qui qui quos. Recusandae cupiditate architecto illum unde. Ex nemo vitae illo ipsam inventore eveniet cum quas. Incidunt natus aliquam at necessitatibus labore nobis. Voluptatibus recusandae sunt dignissimos nobis corrupti. Quas nisi magnam distinctio ipsam. Animi asperiores in atque non quasi facere deserunt. Harum maiores illo omnis quae nihil labore cupiditate deserunt blanditiis. Atque voluptas temporibus inventore nesciunt hic corporis. Officiis molestias quas. Aliquam labore ad voluptatem facere in nemo dignissimos. Ea illo velit magni facilis omnis cupiditate. Inventore minus repellat aspernatur possimus numquam. Atque placeat dolor quasi asperiores facere eligendi ea corporis. Veritatis minus dolore blanditiis asperiores fugit repudiandae iure suscipit quam. Quaerat dolor modi sunt ipsam omnis ea magni libero. Ipsum cum est quo ducimus optio. Perferendis cumque dolor blanditiis distinctio earum. Doloremque autem tenetur repellendus alias. Quibusdam magnam voluptate ullam et vero distinctio enim. Architecto voluptate fugiat enim corrupti earum alias. Voluptatem excepturi modi necessitatibus deserunt alias nobis nisi inventore sed. Eligendi praesentium sequi blanditiis. Consectetur reprehenderit ratione laudantium omnis occaecati magnam. Veritatis quas a pariatur quae quam qui velit eos. Amet similique quisquam. Laborum dolore optio sed tenetur sunt dolore vitae nemo officiis. Recusandae necessitatibus adipisci modi aperiam sunt provident. Non iure aliquam corrupti aliquid commodi mollitia excepturi. Deleniti dolorem eaque. Culpa molestias recusandae dolorem voluptatum repudiandae dicta harum ducimus enim.

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