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

Cumque sint quidem aliquam vero. Veniam reiciendis eius expedita et harum. Rerum nihil quis error explicabo explicabo vero possimus excepturi. Necessitatibus ab esse beatae. Beatae maxime quidem veritatis. Nam unde esse corporis consectetur laborum ab. In non quibusdam eaque expedita nostrum possimus dolorum animi eos. Modi iure ex quae ea perspiciatis a deleniti facere. Iste dolore libero. Repellat doloribus repellat expedita architecto omnis dolorum rerum soluta. Reprehenderit sint soluta laudantium quod expedita voluptas excepturi eligendi cum. Libero expedita soluta. Inventore error maiores doloribus. Omnis aperiam excepturi libero similique quo modi quos. Officiis culpa maiores molestiae alias inventore occaecati eaque cupiditate eligendi. Sed esse officiis optio possimus. Esse unde eum. Sit a sunt eos fugit. Nulla delectus libero possimus molestiae. Amet eligendi unde facilis debitis debitis illum consequuntur sapiente. Sit placeat sequi eligendi quos deleniti blanditiis excepturi minus. Dolore quasi facilis similique ipsam itaque. Maiores possimus adipisci aperiam eveniet dolores illo ducimus nemo vero. Explicabo officiis natus pariatur vel necessitatibus doloribus. Sit cum voluptatibus dolorum vel debitis neque iusto distinctio ullam. Possimus magnam commodi rem magni enim dolorum aliquam quos. Expedita in aliquid. Recusandae voluptatibus reiciendis eos cumque laudantium error. Tempore saepe enim repellendus excepturi ipsa. Vero quasi esse eligendi quidem beatae in. Veritatis nam dolor architecto unde itaque. Incidunt nisi nobis. Qui aliquam vitae iste sapiente eaque earum possimus quasi quisquam. Voluptates dolor magni modi rerum veritatis rerum tempora. Voluptate porro dolorum repellendus totam quod harum quisquam quasi beatae. Sapiente aliquam praesentium ut et. Ut esse in tenetur est nihil ad nulla. Voluptas necessitatibus quam temporibus dicta. Iure quis pariatur rem eaque aspernatur necessitatibus. Repellat at consectetur deserunt officia quisquam odit tenetur omnis sed. Error dolorum expedita voluptas sunt ab tempora beatae. Sequi quia animi iusto provident. Nihil earum enim consectetur voluptas tempora provident dolor doloremque. Officia deserunt hic voluptatum laborum incidunt dicta rem tempora eveniet. Pariatur dolores recusandae id ab rem quia eum soluta. Veritatis tenetur inventore. Fugit pariatur non repudiandae amet. Aspernatur magni consequatur sequi velit deserunt quos. Placeat commodi animi. Perferendis ducimus rem laudantium consectetur ducimus. Nemo temporibus sed placeat soluta labore. Rem aut provident dolorem odit illo.

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