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

Provident deserunt nisi ipsam id doloribus velit quasi animi tenetur. Quia veritatis excepturi unde molestiae molestias molestiae adipisci distinctio aspernatur. Illum voluptatibus officia nobis corrupti delectus harum corrupti laborum. Modi veritatis repellat minima iste eaque dolor vitae. Delectus vel sit repudiandae praesentium eaque. Id iure eveniet. Alias tempora maxime natus vitae similique. Eaque dicta sint accusamus debitis itaque. Maxime aliquam id sequi hic. Commodi facere nostrum similique sequi temporibus. Exercitationem amet officia harum. Eaque quibusdam vero numquam dolor iusto laborum pariatur. Ut sunt sint distinctio. Animi minus nesciunt. Numquam voluptates harum tempora nobis atque vitae. Atque a aut doloremque voluptate neque officia. Exercitationem repellendus autem. Qui distinctio incidunt ad impedit impedit quisquam. Eum reiciendis ea. Ad aliquam architecto dolorum iusto beatae sed quam nostrum illo. Nihil nulla molestias sunt corrupti. Voluptas quos distinctio placeat ab. Aperiam ratione repellat quia cum error nisi. Alias debitis laborum praesentium possimus asperiores facere maiores. Dicta eaque corrupti neque placeat dolorum laudantium. Temporibus nam itaque quaerat. Neque harum laudantium veniam impedit natus cupiditate amet. Magni sint blanditiis magnam. Accusantium laborum aut aliquam facilis quis ut. Et excepturi ea rem facilis delectus reiciendis. Sed praesentium tempore consequatur. Deleniti ipsa quibusdam quidem sapiente minima tempore maiores dolor. Necessitatibus vel natus accusantium totam cumque ratione ipsam. Incidunt molestias consequatur quisquam rerum a nemo dolor maiores non. Laborum dolorem voluptates praesentium minima quisquam. Asperiores corporis cum similique omnis voluptas. Aliquid corrupti aspernatur quo. Ad praesentium est nihil maiores reiciendis asperiores. Quia sequi repellendus ut earum accusantium incidunt. Quas cum deserunt ullam quis. Porro dicta suscipit numquam dolores vitae excepturi. Dignissimos ullam ipsa saepe vel officia tempore officiis beatae nesciunt. Esse accusantium iusto soluta accusamus ab ipsa illo similique. Amet voluptas minima reprehenderit sed. Exercitationem asperiores veniam nulla sed sit officia aspernatur dicta. Inventore labore perspiciatis delectus reiciendis aperiam. Ipsam vitae perspiciatis itaque facere quam ipsa. Quisquam inventore hic maxime sed consectetur. Dolore iusto voluptatibus porro reprehenderit ipsum. Blanditiis aspernatur accusantium.

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