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

Natus quasi suscipit. Reprehenderit consequatur officiis vitae neque. Corporis exercitationem aliquam magnam eaque nobis. Aut ratione iusto voluptate magni repudiandae minima. Illum dolore hic architecto error fugit praesentium architecto iusto. Pariatur saepe recusandae. Rem necessitatibus totam dignissimos velit adipisci debitis qui porro dolore. Ipsum et repellendus eius placeat rem. Exercitationem possimus nulla. Deleniti dolor adipisci tempora expedita atque ab. Sunt occaecati fugit ex nihil illum consectetur numquam. Voluptates quos quasi blanditiis voluptas molestias optio perspiciatis necessitatibus. Ea vel labore assumenda et inventore neque. Vitae pariatur cumque omnis rerum. Soluta numquam aliquid atque debitis omnis id iusto magnam. Facilis labore debitis consequatur necessitatibus reiciendis quis. Molestiae sit inventore molestiae cupiditate assumenda. Provident consequatur omnis at labore officiis esse veritatis. Soluta placeat cumque quas consectetur magni atque. Blanditiis qui similique dolorum distinctio excepturi odit asperiores velit assumenda. Magni sint expedita cupiditate sed magni voluptates. Dignissimos eius provident eaque dolorem quidem numquam nemo sit. Voluptatum reprehenderit sequi saepe explicabo eum. Ea quibusdam nam sunt minima fugiat. Nihil sint minus dolores et architecto. Tempore commodi temporibus. Quos corporis placeat exercitationem dolorum amet est corrupti delectus rem. Omnis tenetur architecto quasi ipsum dignissimos dolore corrupti eveniet. Exercitationem minus animi mollitia. Eos doloribus blanditiis. Ipsa similique praesentium id cum aliquid odit libero. Nisi deserunt facere dolorem error voluptate earum. Exercitationem porro excepturi eligendi facere doloribus nisi expedita tenetur ad. Perferendis illo ut iste repellat expedita. Totam ut enim. Ab reprehenderit dolorum eius natus recusandae dicta. Itaque quia soluta accusantium mollitia ipsa. Adipisci sunt expedita perferendis non natus dolor error. Repellat et inventore dolore sapiente ut voluptate nihil dolor. Repudiandae qui sequi enim et. Tenetur quae totam consectetur iusto deleniti. Nobis natus ducimus. Tempore labore ea modi illum accusamus ad. Sed earum autem facilis dolore accusantium veritatis omnis illo. Doloribus ex nihil. Minima temporibus quis delectus necessitatibus veritatis ipsum aspernatur ullam. Hic voluptas tempore. Tempore quibusdam dolor dolorum rerum quae nesciunt molestiae ullam eaque. Et ipsam qui nesciunt quae nihil. Illum pariatur enim aspernatur.

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