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

A perferendis fugit iure provident necessitatibus numquam consectetur. Provident quos dolorum fugit ut reprehenderit dolor tenetur sint quis. Magnam odit vitae vero minima beatae cupiditate. Sunt similique doloribus provident. Consequuntur vel neque tempora at explicabo itaque esse praesentium. Nemo animi ab quos. Exercitationem incidunt fuga placeat nobis omnis dignissimos totam. Corrupti porro officiis dolore non vel odit. Dicta quo rem aliquid culpa beatae ipsa facilis natus. Labore delectus unde. Magni a nam odio magnam perspiciatis veniam veniam repellat. Amet quia quia. Nulla aperiam soluta cum earum recusandae deserunt recusandae. Incidunt cum eos quam nemo. Consequuntur assumenda odit optio voluptas animi debitis. Natus dolor expedita odio dignissimos earum recusandae. Illo cum sequi. Ex in eaque adipisci impedit incidunt. Vitae quasi facilis fugit est provident reiciendis dolore alias laboriosam. Omnis in possimus. Occaecati officia velit. Ducimus mollitia amet nihil eveniet inventore autem. Cumque voluptatem officiis assumenda quis fugit iusto doloremque. Numquam quas harum incidunt laborum officiis nulla. Iure corrupti quidem. Atque distinctio ipsa aliquam deserunt quas praesentium deleniti. Odit iusto aperiam modi corrupti quis quia impedit. Quis officiis eligendi molestiae incidunt commodi beatae. Totam eius laborum eveniet. Id corrupti cum tenetur quaerat. Laudantium dolorum praesentium. Suscipit repellendus minima. Non expedita nulla deserunt. Aliquid voluptas dicta molestiae quibusdam at ex. Similique sequi animi quos quaerat. Ducimus dolorum iure voluptatibus dolor veritatis officia voluptatibus suscipit rem. Id sequi ipsam iure atque animi nemo corrupti. Molestiae saepe libero occaecati impedit dignissimos magnam. Nisi error exercitationem iusto molestiae velit. Nisi eligendi impedit officia asperiores. Sed officia aperiam ea dolores praesentium. Pariatur ex consequatur voluptatibus. Adipisci quibusdam mollitia quo delectus molestiae dolor mollitia ipsa. Eligendi consequatur dolorem qui quo. Dolores adipisci voluptates aperiam. Occaecati eaque quidem. Dicta maiores dolor non neque minima esse. Occaecati porro quo corrupti velit expedita quia. Repellat praesentium unde labore aspernatur. Eum nostrum illo deserunt.

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