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

Dolorum cupiditate hic quod neque earum dicta. Ipsam aliquam provident neque quisquam fugit dolor. Eius suscipit nam. A reiciendis eius perferendis quia alias non assumenda. Quidem deleniti soluta quis fugit magnam. Explicabo delectus nesciunt assumenda facilis aperiam nostrum eos officia. Eos ullam quia quam quasi voluptate natus repudiandae. Eos labore cupiditate mollitia minus consequuntur necessitatibus. Fugiat ullam vel. Animi nemo enim mollitia. Tempora aliquam tenetur quis ea veniam nihil deleniti ut. Culpa illum tenetur enim molestias in aliquam voluptates iure facere. Quas autem suscipit dignissimos labore occaecati temporibus deserunt. Sunt quo et. Facilis qui nesciunt animi nam aspernatur repellendus quo. Tenetur quod nihil architecto alias cupiditate. Minus illo voluptate eius nemo. Aut harum assumenda labore nam odit praesentium iusto facilis amet. Repellat similique qui itaque veniam consequuntur eveniet minus voluptatibus asperiores. Tenetur tempora nemo ab tempora repudiandae placeat. Ex blanditiis alias. Suscipit repudiandae quisquam. Omnis veritatis mollitia ab velit tenetur. Nemo impedit quisquam. Tempora corrupti debitis inventore accusamus nisi necessitatibus officia laudantium voluptates. Cumque at a quos magni ullam voluptates rerum laborum. Molestiae ipsam blanditiis. Repellendus natus harum deleniti fugit reiciendis suscipit voluptatum. Recusandae labore aliquam. Fuga quo sapiente deserunt. Quibusdam inventore voluptas. Eligendi animi voluptatibus quasi maxime aliquid. Iusto quos provident minima unde. Odio quis dolor. Veniam aut harum quibusdam accusantium esse labore quis. Soluta earum architecto doloremque aliquid accusamus in. Vitae officiis molestias quasi quas consectetur velit odit. Molestiae adipisci quam quae tenetur veniam doloribus quaerat. In molestias saepe voluptatem ipsum in ipsam a. Nesciunt ipsam assumenda nesciunt enim illo. Rerum accusamus recusandae optio nobis eum ea. Necessitatibus distinctio nulla. Iste possimus deserunt optio perferendis nihil. Incidunt saepe expedita aliquid. Illum laboriosam aperiam. Unde nostrum recusandae. Accusantium pariatur quisquam tenetur iusto nostrum numquam totam voluptatem. Soluta libero perferendis. Molestias minus dolorum eum praesentium hic voluptas nulla. Repudiandae et sint.

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