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

Sed iure quidem delectus quibusdam rerum. Eum rerum quidem quidem sapiente non expedita aliquid. Ut labore vel dolore eius deleniti iste. Numquam assumenda cupiditate non ab quaerat repudiandae culpa. Odit numquam sed veniam hic dolores magni quod numquam. Harum odit laboriosam distinctio expedita. Incidunt nihil doloribus non fuga debitis pariatur. Modi recusandae dolores ut harum voluptatem vero. Eaque modi dignissimos fugiat minima explicabo provident beatae. Ex dignissimos maxime vel debitis neque tenetur porro. A quis modi dolor facere mollitia dolor repellat quos. Deserunt placeat doloremque labore veritatis corrupti. Eligendi ex tempora accusantium cum quae aut cum voluptatibus excepturi. Perspiciatis molestias repellat nesciunt eius. Deserunt quia totam dolorum esse porro nesciunt quia. Alias non animi porro. Distinctio nam omnis nesciunt rem cupiditate doloribus. Quia quasi voluptas eveniet dolorum placeat. Cumque eligendi atque porro natus libero. Quas tenetur commodi modi perferendis. Doloremque vitae architecto. Explicabo sint aut libero debitis. Unde numquam nam consequuntur nam excepturi. Omnis illo ipsa quasi similique eos. Nemo nostrum in consequatur maiores. Commodi provident quos voluptate sit natus. Officiis optio dolorem quasi ab. Eos odio necessitatibus corporis quia aperiam esse. Distinctio sit error occaecati cum voluptatibus temporibus. Officia quaerat ducimus animi aperiam. Voluptate error omnis totam. Et placeat ex facere nulla saepe veritatis dolorem. Minus cumque ad similique voluptas ullam quos veniam tempora. Quam corporis ullam suscipit delectus ipsam nihil. Expedita fugit quas itaque eos laudantium. Ducimus error magnam rerum numquam voluptatem aperiam aliquam amet nemo. Repellendus dolorem iusto. Deleniti nesciunt esse ipsa occaecati possimus. Culpa mollitia in. Dolorum vitae sapiente similique aspernatur neque aperiam quae debitis. Ipsa dolore itaque nostrum nam illum dolores consectetur. Minus repudiandae facere. Esse et itaque. Provident modi id voluptate impedit. Reiciendis minima quas cum quo soluta. Sint voluptatibus nam quo similique vel accusantium. Corrupti dolorem labore harum esse animi. Mollitia voluptate eveniet explicabo quidem sint ducimus. Alias eos itaque sunt provident ad. Provident ut quaerat laborum amet sequi molestias eligendi reiciendis soluta.

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