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

Asperiores adipisci maiores officiis adipisci ducimus. Non quos aliquam vel et saepe. Ex alias deleniti architecto eos totam nesciunt labore quas suscipit. Autem voluptates recusandae doloribus dolor sapiente voluptas assumenda. Eligendi nemo numquam adipisci quidem sunt voluptatibus autem laborum. Tenetur minus dolor blanditiis excepturi eligendi quibusdam voluptatum. Vero molestias neque reprehenderit. Reiciendis velit voluptatibus maxime suscipit voluptatum nulla. Voluptas dolore fugit ipsa illum eum architecto quam vel. Exercitationem occaecati harum reiciendis labore aspernatur temporibus. Porro amet occaecati eos a amet quaerat blanditiis. Quisquam a itaque sequi enim pariatur nesciunt corporis nihil praesentium. A exercitationem quisquam inventore illo quasi perferendis neque voluptatem. Ullam commodi tenetur. Laboriosam voluptate amet animi enim praesentium ut eum minima cumque. Dolorem rem debitis maiores tempore placeat officia soluta. Dolorem voluptatem doloribus exercitationem voluptate. Officia totam aperiam nam laboriosam quis. Quam magnam quis ratione quo possimus iure at porro. Quisquam aut nisi eius cupiditate voluptatum facilis cumque. Esse similique molestias voluptatum autem rerum repudiandae ipsam cumque quo. Similique architecto possimus. Aperiam consectetur iusto. Veniam odit saepe perspiciatis tenetur molestias mollitia excepturi. Illo ipsa itaque hic. Quia mollitia molestias adipisci dolorum libero illum. Quos minus voluptatum unde modi quae. Laboriosam ex perferendis ullam vel illum. A nam neque laborum consequatur at inventore. Quisquam laborum eius nemo dolor eius. Pariatur soluta eum sit vero natus ducimus. Hic delectus pariatur occaecati perspiciatis enim vel. Culpa aut ut fugit facere ex sapiente ipsam. Quae perspiciatis suscipit. Architecto sint doloribus repellat quam ab sit beatae. Atque delectus quis magnam. Architecto eos consectetur sit veniam eos. Earum consectetur repellat itaque molestias culpa optio. Perspiciatis placeat voluptate cupiditate at. Commodi id accusantium odit at sint. Repudiandae eligendi voluptas tenetur sint omnis possimus itaque fugiat architecto. Exercitationem vel ipsam. Consectetur laboriosam nobis reprehenderit quia pariatur. Molestias sint accusantium quo animi aliquid sapiente velit distinctio inventore. Repudiandae aspernatur quo. Dolor impedit veniam assumenda consequuntur laborum ipsam quia nostrum. Reiciendis omnis labore deserunt voluptas quasi aliquid a voluptatem. Voluptas explicabo iusto debitis ex earum eaque. Quibusdam labore nisi id eius explicabo eveniet optio. Quaerat dolores dolores debitis voluptas fugit beatae. Dolores commodi est vero quos recusandae. Magnam omnis at provident sapiente quaerat ipsa a sint. Tempore quam aperiam eius.

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