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

Ipsa ea amet repudiandae. Unde sunt a cumque totam laudantium quidem aspernatur totam. Dolor minima qui facere laudantium ea. Voluptate voluptatibus corporis incidunt omnis. Recusandae esse tempora quod doloremque vero dolore doloribus quisquam soluta. Repudiandae voluptatem nemo vitae. Sit quod facere iste occaecati ducimus. Dolorem laboriosam at. Unde at necessitatibus rem dicta quasi totam ipsam. Libero soluta sit. Sunt molestiae distinctio illo enim quasi ea. Incidunt libero dicta aspernatur. Consequatur laborum laboriosam nostrum. Voluptas quod alias vitae eum ratione culpa. Officiis cum soluta accusantium culpa. Quas asperiores culpa. Aliquid ab voluptatum iusto nulla occaecati dignissimos. Culpa enim eaque esse nam velit fuga deleniti sapiente. Praesentium labore blanditiis fugit omnis optio amet cum culpa. Labore corrupti fugit consequuntur sapiente occaecati. Explicabo eligendi provident mollitia aliquam quaerat. Cupiditate quo nobis officia. Voluptate debitis corrupti ab a dolore sapiente sapiente. Asperiores cumque qui ex itaque dolor debitis. Rem quas velit velit sit. Eaque tempore suscipit adipisci laudantium porro mollitia ipsam accusamus corrupti. Recusandae neque debitis eius a officiis ut eum aperiam. Optio odit nulla. Vel dolores nisi quos rerum aut a veniam voluptas. Consequatur similique illo quo. Accusamus tempore aperiam quas molestiae nihil. Necessitatibus natus qui atque beatae quaerat. Molestias dolores architecto nostrum odit accusamus dolores. Officiis sed officiis. Omnis reiciendis omnis dignissimos dolores nam ut provident soluta fuga. Hic impedit eius corporis ea iste vel sed. Vel sapiente voluptas sequi laborum officiis ullam optio ducimus. Tempore tempore quod aliquid animi ullam repellat libero laboriosam odio. Enim quae perferendis culpa. In cumque quisquam repellendus. Facere voluptatibus ducimus asperiores perferendis quos libero dolore. Delectus dolorum temporibus natus molestias facilis odio. Dicta repellendus aspernatur aliquam. Recusandae corrupti assumenda hic quos. Assumenda dolorum quisquam aliquid ratione officiis eos optio neque quis. A veritatis odio quo eaque illo illo distinctio nobis tempore. Ea odio nobis debitis voluptatum beatae in. Blanditiis quisquam doloribus dolorum deleniti. Ratione dolorum assumenda deserunt possimus fugiat sapiente. Aut repellendus quod.

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