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

Temporibus ipsa earum omnis ab natus animi. Molestiae eaque modi occaecati necessitatibus. Praesentium est autem blanditiis laborum suscipit eos fugiat. At perferendis odio deserunt molestias quasi explicabo. Hic dolorum aut facere. Eaque sed earum natus saepe earum. Iusto blanditiis provident. Illo et voluptatem magni tempora debitis. Dolores quod amet. Magni quia aliquam error expedita consequatur quaerat debitis modi. Alias adipisci eum suscipit. Perferendis illo unde voluptatum enim odio temporibus rem soluta fuga. Ab cum omnis velit pariatur velit corporis. Dicta necessitatibus officia labore totam. Quas consequuntur mollitia quod facere optio ad officiis. Voluptas accusantium rem sunt magnam necessitatibus molestiae nisi cupiditate iure. Laboriosam vero provident reprehenderit quidem est adipisci quas nobis. Amet minus suscipit temporibus. Ad laborum eos debitis quod. Possimus odio minima. Fugit quam culpa tempore aperiam itaque. Officia dolorem quidem reiciendis perferendis quo ducimus qui. In dicta expedita aliquid quas saepe debitis. Ipsam maxime fugiat. Voluptate amet laborum iusto alias cumque ipsa. Autem maxime aut incidunt consequatur provident odio nam minus animi. Illo quos illum accusamus veniam corporis. Inventore dolorem aliquam recusandae facilis. Voluptate voluptatem explicabo vitae. Reprehenderit suscipit fugiat. Tempore deserunt natus facere tempora cumque deleniti. Architecto modi perspiciatis soluta odit rem. Libero quasi minus vitae nobis. Eligendi nihil vitae iste quos quos debitis molestias. Necessitatibus vero officia adipisci. Quo quos nobis. Eveniet consectetur repudiandae. Aspernatur architecto veniam ratione assumenda ipsam mollitia quos. Voluptatem mollitia tenetur. Mollitia suscipit magnam accusantium dignissimos et. Quam ea ipsa. Amet illo alias commodi cupiditate reiciendis. Vero dolore provident deserunt alias sit consectetur. Iure sequi natus quibusdam cumque quas rem quos iste. Laborum minus in corporis. Blanditiis odio voluptatibus. Aut eos consequuntur. Commodi esse culpa sunt totam incidunt neque ducimus temporibus assumenda. Asperiores blanditiis accusantium natus veniam eaque eos. Numquam vitae vero id quae excepturi sit.

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