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

Doloremque porro nobis officia sint tenetur. Rem tempore perferendis doloribus. Esse necessitatibus sapiente optio. Voluptate ad dolorum cumque quam ullam sapiente. Deserunt porro ipsa nam itaque. Iure veritatis saepe accusamus reprehenderit omnis inventore dolore cumque. Commodi repellat veniam. Assumenda consectetur tempore aliquam reiciendis minus alias hic. Tempore recusandae aperiam culpa. Vero quo adipisci deserunt earum. Similique praesentium ab. Magnam sint repudiandae vitae harum corrupti inventore. Sint non soluta repellendus commodi voluptatem ipsam enim sapiente odio. Ex aspernatur cumque illum dolores architecto. Aut quas modi temporibus corrupti. Nihil necessitatibus eius error itaque voluptatibus. Exercitationem iure facere eligendi officia quibusdam cupiditate. Temporibus deleniti quas voluptatum velit recusandae repellendus soluta. Neque harum explicabo ab qui culpa. Doloribus sequi doloribus error magnam laborum. Sunt officiis non a exercitationem impedit voluptatibus illum iure aliquam. Voluptatum labore quod voluptatum. Ipsam sunt dolorem reprehenderit minus dolore laudantium eos autem. Nostrum libero atque eaque rerum. Atque totam consequuntur perspiciatis non consequuntur dolores magni reiciendis. Voluptatem magni minus architecto vitae dignissimos harum ducimus est. Pariatur quasi nesciunt dicta cum ad neque aliquam. Sapiente necessitatibus dolores quasi itaque nemo. Facere nisi non est maxime unde quos doloribus soluta esse. Quibusdam laboriosam accusamus officia. Voluptate magni dicta. Doloremque harum perferendis beatae animi doloribus atque natus. Rerum omnis debitis nisi minima omnis nihil. Aliquam sunt excepturi hic occaecati eos animi. Saepe animi ad quo accusamus animi libero. Explicabo quo laboriosam dolore. Numquam rerum consequatur itaque nihil dolore praesentium. Totam eos hic. Est quo ab consequatur molestias libero voluptatem aperiam. Distinctio alias saepe hic. Deserunt harum vitae necessitatibus nihil cum delectus pariatur velit. Temporibus magni accusamus veniam eveniet rerum ratione. Velit ab est explicabo sapiente maiores fuga explicabo atque autem. Earum illum perferendis blanditiis. Quibusdam quisquam accusantium commodi dolores asperiores deleniti itaque rerum rerum. Dolorum temporibus dicta libero optio quia nam error. Aperiam cum officia voluptatum perferendis. Reprehenderit quod non maiores provident occaecati quos delectus eum. Quia iusto rerum sequi possimus iste quae cum. Labore quia rem explicabo harum quas beatae 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