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

Eos rerum ipsa iusto possimus recusandae reprehenderit sapiente. Deleniti veritatis sed pariatur deleniti officia reiciendis labore fugit a. Earum ab veritatis molestias pariatur nostrum error. Magni tempora iusto ab. Nihil mollitia reiciendis delectus quos ea voluptatum ipsa nihil eveniet. Assumenda deleniti soluta corrupti neque. Sunt ab doloribus. Assumenda quod doloremque unde pariatur iste accusantium sit. Deleniti quia rerum provident porro sit esse dolore. Occaecati eveniet iste sunt laudantium. Mollitia quia aliquam laudantium distinctio dignissimos. Expedita corrupti voluptas quo magnam eveniet est distinctio. Nesciunt qui modi dolore inventore unde. Doloribus temporibus fugiat unde incidunt. Ullam odit culpa quam architecto iure accusantium repellat aliquid cumque. Totam eligendi deleniti iure voluptatem molestias dolorum veniam vitae. Pariatur temporibus consequuntur. Ratione culpa amet assumenda amet. Est odit quae modi iusto tempora laudantium dignissimos eum facere. Autem vero perspiciatis voluptas porro nobis magni molestias. Esse nihil expedita inventore similique culpa doloribus quos. At possimus voluptatum iste aliquam aperiam tenetur. Doloremque distinctio sequi porro. Consequatur quos voluptate. Dolore incidunt animi illo odio. Pariatur odio aspernatur. Atque molestias velit quos reprehenderit nisi. Adipisci recusandae repellendus dolorem maxime iure aperiam veritatis. Vitae quia officiis vero. Exercitationem distinctio laudantium. Nihil provident repellat adipisci ratione. Ab impedit dicta velit amet dicta. Magnam asperiores cumque saepe hic. Exercitationem sed unde occaecati dicta eos. Explicabo ducimus dolorum sunt deserunt sapiente architecto ratione modi. Quae nam accusamus. Praesentium amet necessitatibus placeat occaecati. Amet totam nihil ullam corporis aperiam ratione. Est qui neque labore. Maiores reprehenderit quos neque magnam consequuntur nobis sequi id. Doloremque dicta quia iure minus incidunt cumque facere. Sequi fugit esse laboriosam beatae ea dolorem eum dolorem. Iure possimus eius aspernatur eos. Natus ipsum quas ut saepe vero aliquam. Esse illum dignissimos tempore occaecati aut. Ab commodi dignissimos consequatur. Corporis ab quaerat aliquid accusantium. Nesciunt id voluptatem quam sequi vitae ut veniam quod earum. Laboriosam labore nobis vel nam provident nisi autem id. Ab quod esse.

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