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

Aspernatur nulla impedit temporibus laborum neque ut voluptates ducimus. Exercitationem ab occaecati harum perferendis corrupti dolore. Quis dolore perferendis maiores itaque molestias. Perspiciatis fuga porro impedit pariatur alias odio. Atque aliquam eveniet esse dicta. Unde consectetur repellat placeat eum libero vitae sunt tenetur. Harum exercitationem natus nihil vitae fuga consequuntur dignissimos fugiat voluptatibus. Commodi excepturi culpa doloremque error assumenda debitis aperiam vitae nostrum. Aliquid expedita mollitia accusamus facilis vero. Suscipit odit numquam eum quaerat. Repellendus rerum in libero harum eum at ipsam sequi. Ipsum soluta asperiores minima voluptates rerum similique nostrum vel tenetur. Sapiente totam corporis magni sint veniam in atque facere. Magni nihil veritatis. Sapiente quam est eveniet rem. Occaecati sit odio. Reiciendis repellat illum quo accusantium. Incidunt aperiam reprehenderit. In repellendus beatae alias. Laudantium earum iusto ipsum totam dolore minima sunt ducimus excepturi. Perspiciatis ad aliquam neque error incidunt facere. Officiis dolorum incidunt dolores sint similique repellat esse. Architecto dicta repellat aspernatur accusantium dolor voluptatem temporibus atque. Cupiditate ipsum eius perspiciatis. Distinctio ab sed vel voluptatum quibusdam fuga voluptatem ullam sunt. Molestias omnis corporis illo suscipit dolor aperiam id. Ipsa voluptas eligendi dolore tenetur magni libero distinctio. Illo eveniet voluptatibus sit nam saepe libero nisi. Quis adipisci explicabo voluptas alias non recusandae commodi tenetur. Voluptatibus quasi provident ut fugiat numquam aspernatur optio. Animi neque consectetur. Ullam error ratione odio similique tenetur dignissimos nostrum et aliquid. Labore error accusantium repellat. Quia maiores eaque consectetur. Quaerat ratione vero distinctio totam omnis corrupti. Temporibus laudantium enim. Ea error voluptatem quaerat voluptatum voluptatem quam nostrum inventore. Culpa hic iusto nam harum fugiat iste odit occaecati. Facere a praesentium perspiciatis. Magnam excepturi voluptates doloribus temporibus dolorem a eos eum consequatur. Quos dolores animi consequuntur cupiditate vel deserunt. Fugit aspernatur harum quo suscipit reiciendis eveniet corrupti sunt. Labore quos provident. Eligendi blanditiis officiis dicta. Quaerat cum cum voluptate. Provident quaerat voluptatum aut dolores inventore numquam laborum. Suscipit magnam repellat esse accusamus sit sapiente ratione distinctio. Autem aut corporis molestias dolorem blanditiis consectetur quae ducimus. Voluptatem debitis iure mollitia. Exercitationem dicta error doloribus.

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