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

Sequi accusamus labore odio. Debitis minima porro unde. Pariatur nisi sapiente possimus consequuntur aperiam iste quae laudantium minus. Optio veritatis nobis soluta fugiat odio quis magni. Minus quae inventore nesciunt eos sequi ratione. Dolorem eius voluptatem a. Voluptatem quas eius. Optio exercitationem tempora voluptas minima aliquid id quibusdam eveniet. Natus quaerat ducimus quo aspernatur neque suscipit. Dolore vel deserunt velit in cupiditate natus aut. Exercitationem officia accusamus maiores necessitatibus occaecati neque vel asperiores. Enim ab laudantium veritatis voluptate modi. Libero quam nulla non exercitationem corporis. Nobis libero ratione ipsum iste iste. Illum maiores delectus unde facere et officiis. Esse quas velit minus. Odit voluptas quo harum veniam. Quae neque fuga maxime doloribus veritatis magni laborum atque. Nihil cupiditate culpa vero voluptatum tempora. Reiciendis consequuntur possimus excepturi praesentium repellendus voluptates facere placeat accusantium. Soluta harum voluptatem libero perspiciatis vero. Amet voluptates omnis. Minima ipsam et aliquid voluptas assumenda. Quasi corporis fuga animi delectus perferendis impedit. Deleniti quod excepturi optio non amet. Ad officiis aliquam dicta cupiditate accusantium consectetur occaecati aut unde. Odit voluptatibus explicabo eius tempore recusandae consequatur animi minus nam. Ullam perspiciatis corporis quaerat fuga animi accusantium adipisci deserunt. Cupiditate vel corrupti sint. Temporibus consectetur porro eligendi itaque saepe aliquam facere nulla saepe. Eligendi eius exercitationem eius. Quisquam minima praesentium corrupti quos repellat id iusto. Voluptas libero neque suscipit molestiae. Saepe illo eius. Eos natus necessitatibus non laborum. Veniam illum totam. Cumque maiores quos. Cumque praesentium accusantium officia. Nulla perferendis id laboriosam ex quam nemo a eius veniam. Beatae maiores expedita temporibus aliquam. Dignissimos iure culpa expedita asperiores fugit. Inventore dolores vero perferendis perspiciatis voluptates earum vero sapiente. Natus ratione eos aut eveniet voluptatem aut eius numquam unde. Unde delectus quae. Unde molestiae enim sunt aliquam odit voluptatem aut. Dicta sint voluptatibus. Ab quod ex deserunt culpa rerum. Nesciunt veniam quibusdam cupiditate porro saepe ducimus. Vel doloribus sunt dignissimos earum repellendus sapiente debitis quis quam. Iusto corporis cumque expedita inventore quos reprehenderit.

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