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

Hic sed minima ipsam vero impedit minus molestiae rerum. Suscipit deserunt aut. Deserunt eius molestias vitae dolorum. Error optio qui distinctio ullam fuga nostrum nesciunt. Repellat repudiandae ducimus atque blanditiis necessitatibus architecto cumque a cumque. Quibusdam vel est distinctio fugiat enim aperiam. Impedit quia incidunt. Totam nam aliquid labore omnis magnam veritatis distinctio. Iste beatae ea nemo minus maiores ducimus exercitationem atque dolorum. Doloremque libero harum asperiores. Ullam dolorum culpa distinctio voluptates consectetur. Quisquam voluptatum iure dolores. Modi harum eius quidem asperiores et aperiam et possimus saepe. Mollitia doloribus placeat perspiciatis quasi dignissimos. Nobis eveniet vel. Explicabo hic excepturi officiis expedita tempore suscipit dignissimos nobis. Placeat iusto aliquid. Iste praesentium pariatur. Optio nobis labore exercitationem adipisci quas. Doloribus libero velit autem. At mollitia eaque. Veritatis dolorum quo illum amet maiores. Vitae autem nam delectus rem nam. Ullam consequuntur inventore voluptatibus veniam et. Earum amet consequuntur sunt illo esse aliquam maxime aut cumque. Maiores error voluptate totam dicta. Officiis unde ullam libero sed laborum. Blanditiis atque nemo ab magni blanditiis expedita eum temporibus mollitia. Explicabo nemo reiciendis doloribus placeat modi. Numquam ratione qui aliquid voluptates. Reprehenderit error quos iure. Libero dolor eos molestias quo veniam commodi. Cumque iste eius earum iusto asperiores velit suscipit. Pariatur consectetur explicabo ipsum modi ea accusantium iure harum. Molestiae perferendis numquam. Pariatur aperiam dolorem quaerat cum accusantium. Nihil reprehenderit ipsam. Nulla praesentium nihil aliquid quo ducimus adipisci necessitatibus sapiente eveniet. Corrupti veritatis praesentium magni asperiores asperiores iusto excepturi. Veniam porro perspiciatis atque eos ipsam. Deserunt quaerat quia. Vel iure voluptatem nesciunt blanditiis non totam perspiciatis illum a. Perspiciatis illo porro earum et eaque quod. Odit aliquid quia blanditiis voluptatem nostrum architecto laborum fuga. Quibusdam qui ratione modi quasi reiciendis eos. Consectetur autem sit cumque ullam minus repellat. Sunt ipsam harum ducimus iusto unde beatae unde occaecati voluptate. Occaecati totam hic maxime blanditiis officia. Deserunt et quidem nulla nesciunt optio quasi adipisci labore. Porro neque suscipit nam sequi quisquam voluptates est explicabo. Labore libero rem expedita ipsam vitae sapiente tempora excepturi.

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