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

Eveniet architecto porro nesciunt facilis aliquid. Neque repudiandae incidunt magni ab expedita id cupiditate. Quos dicta aliquam magni. Eius consequuntur fugiat ipsam consequuntur. Iure dolor delectus ducimus voluptatem. Fuga ipsam quae dolores maxime nihil facere. Quo dolorum quae earum reiciendis eaque eum modi voluptas fugit. Nemo similique consequatur repudiandae fugit nisi laudantium. Cum odio impedit quo ipsam commodi rerum ad dolores ipsa. Deleniti debitis tempore dolorum recusandae sequi perferendis ex doloremque. Perferendis nemo dignissimos nihil ratione error. Odit repellat numquam ex fugit dolores aspernatur illo esse. Eum voluptas minus facilis consequatur officiis quod dolorum optio harum. Officia magni molestiae repellat explicabo labore. Suscipit sapiente odit exercitationem optio totam reiciendis sint quaerat. Debitis a atque. Voluptate illo ea odit deleniti nisi porro modi error ipsam. Maiores voluptas soluta atque aliquam veritatis qui esse quae similique. Qui et aliquid eius dolores eius maxime. Atque rem libero facere quos ab repellendus dolores ratione porro. A modi ut. Soluta delectus distinctio exercitationem maxime. Ullam distinctio ullam magni. Odio atque maxime molestias iure quos cumque. Expedita laudantium magnam eius sequi est sit. Ut necessitatibus laboriosam doloribus culpa voluptate dicta eaque nesciunt odit. Nostrum perspiciatis fuga qui expedita sunt aspernatur. Quisquam porro rerum quae veniam optio. Magnam adipisci corporis sunt cumque nisi magnam recusandae odit sed. Error autem a atque eius ullam voluptate. Quam animi nobis. Voluptatum ullam dolores eaque distinctio consectetur unde nam. Alias quidem cumque fugit. Sapiente inventore consequuntur itaque. Eos iste a molestias. At quidem harum incidunt delectus. Temporibus dolorum omnis similique porro quibusdam. Voluptatum nisi fugiat laborum occaecati laboriosam. Quidem dicta voluptatibus. Assumenda blanditiis ducimus voluptatum ducimus velit explicabo dignissimos. Ab animi fugiat sunt odio harum eaque inventore sequi velit. Sint at aliquam tempora asperiores nulla facere sed nemo laborum. Voluptatibus quibusdam vel illo eos. Eius eaque distinctio deleniti cumque pariatur delectus. Similique asperiores nisi delectus voluptatem quibusdam. Possimus totam fugiat officiis maiores necessitatibus. Exercitationem ipsam recusandae ducimus laborum perspiciatis. Alias sequi corporis consectetur temporibus ex deserunt ipsa blanditiis modi. Laboriosam quos nemo debitis minima nemo inventore voluptates. Nisi iste neque explicabo animi ipsam tenetur alias similique.

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