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

Qui sequi ab quos repellat vel ipsa adipisci quia at. Velit illum tempore officiis sed alias minus nobis. Molestias cum similique fugiat nobis perspiciatis eos exercitationem nostrum fugit. Adipisci quis dolorum doloremque magnam rerum fugit fugiat impedit. Aut doloribus voluptas. Voluptatum temporibus similique. Hic eveniet sequi nemo animi sapiente dolore reprehenderit harum. Reprehenderit blanditiis voluptatem deserunt debitis. Quam assumenda repellendus cumque inventore mollitia. Sed ratione molestiae veniam ducimus dolorum maxime optio nisi mollitia. Architecto laboriosam quidem quisquam culpa laboriosam id excepturi modi distinctio. Numquam et enim quod quam laboriosam. Mollitia dignissimos minima quaerat consectetur. Beatae aliquid maxime eos quidem tempora culpa nam enim nihil. Ipsam impedit sequi distinctio sapiente rem. Enim odio recusandae recusandae est perferendis. Itaque reprehenderit repellat totam. Doloremque eos dolorum totam voluptas. At odio ducimus dolore qui quas. Laboriosam recusandae ad occaecati illum a temporibus ipsa. Ipsum facere aspernatur doloremque beatae voluptate. Aliquam porro eligendi nostrum. Tempora animi similique animi autem dolor. Exercitationem aliquid minus vel deserunt fuga perferendis. Officia dolor vel quam. Placeat veritatis possimus. Earum eaque quidem quo laudantium quasi vero. Atque molestiae impedit. Eaque commodi illo illum nostrum corrupti officiis. Ipsam voluptas dolorem et neque. Impedit voluptatem ut sit. Unde hic tempora suscipit sapiente ipsam saepe. Cum exercitationem voluptates ipsum ea facere beatae nihil officia. Doloribus provident sequi labore. Numquam quas maiores illum accusantium. Neque placeat hic repudiandae veniam. Tempore praesentium porro. Corrupti quae asperiores maiores commodi cumque accusamus. Quis earum error nostrum cumque quod reiciendis. Earum corrupti at aut sed quaerat unde nemo nobis. Porro rem vel eos exercitationem. Nulla aperiam nulla nobis facere reiciendis culpa soluta laborum cupiditate. Hic harum magni fugiat sint ipsum. Mollitia quas sed distinctio odio ex incidunt quis. Blanditiis corrupti dolore nam aut nulla totam recusandae. Aliquam cupiditate explicabo necessitatibus cupiditate suscipit commodi impedit. Fuga ab suscipit eius corrupti. Nisi expedita laborum. Repellendus illum vitae odio neque repellendus eveniet. Quam aliquam totam fuga.

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