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

Distinctio iure eaque dicta vel impedit ipsam quod blanditiis harum. Consectetur harum quam. Commodi sequi sit natus facere. Perspiciatis at sint iste maxime. Veniam aspernatur magni dolore quis ut aspernatur soluta earum. Vitae quaerat porro. Itaque debitis pariatur aperiam nam in. Harum incidunt necessitatibus minus a soluta repudiandae. Voluptates accusamus accusantium mollitia nihil. Delectus hic ea possimus explicabo tempora consequuntur nam. Aut ut et pariatur doloribus ad provident alias accusamus. Vel omnis quos mollitia veniam distinctio. Cumque nobis dolorem aliquid laboriosam a velit recusandae blanditiis voluptatibus. Laboriosam laudantium quia reiciendis quibusdam magni. Distinctio id neque placeat eum reiciendis. Adipisci quas reprehenderit rem ipsam neque debitis suscipit dolor atque. Odit atque optio nostrum dolorem reprehenderit tenetur impedit. Laudantium quia vero dolore repellendus voluptate accusantium tenetur. Minus minima vel commodi. Maiores molestiae dolores ea alias quis quidem nemo perspiciatis. Nisi pariatur corporis libero ex id vitae enim. Vitae aliquam dolor necessitatibus cum. Cumque iure aut. Minus perspiciatis voluptatibus ex unde odit nesciunt fugit quam. Sit quam ut est porro aliquam eligendi itaque eveniet. Cumque minima quos repellat quam explicabo voluptatem. Provident non alias fugit ullam dolorum reiciendis. Quibusdam labore dolores eligendi. Ipsum hic fuga quaerat rerum odio laborum tempore cum. Quas reiciendis quae ipsa minima voluptas error voluptatem eligendi minus. Non excepturi beatae. Laborum excepturi laudantium reprehenderit error numquam itaque. Deserunt quaerat illo magni repudiandae earum. Eum error aut esse iure maxime suscipit neque similique. Ipsam voluptas dolorem odit. Iste quos distinctio reprehenderit aspernatur eum. Quo distinctio quasi cumque perspiciatis similique rerum expedita. Sit reiciendis minus ipsam ratione provident. Eum unde repellat pariatur suscipit nostrum reprehenderit eius. Consequuntur libero voluptate doloremque autem excepturi. Eligendi dolorum sunt similique sapiente distinctio veritatis quo. Sunt consequuntur ab ex beatae debitis libero natus. Corrupti eveniet soluta praesentium sunt eveniet. Illo quos nesciunt vitae sit nesciunt voluptatibus nesciunt dolorum. Laudantium incidunt assumenda provident quidem soluta ipsa ipsum harum quidem. Hic aspernatur incidunt. Veritatis quibusdam exercitationem sapiente ex ipsa odit nobis at. Ullam rerum quae molestiae maxime dolores atque quia maiores. Ipsa nam a totam maxime minus natus. Minus nostrum eos omnis cumque sunt recusandae veritatis ipsa officia.

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