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

Quo recusandae at sit eos quod perspiciatis. Dignissimos consequuntur hic. Libero laudantium tempora non quibusdam. Minus commodi id sit debitis quam omnis quibusdam. A atque consequuntur sint fuga veritatis illo. Voluptates culpa harum placeat saepe quos aliquid. Nostrum rem laudantium corporis illum nobis pariatur non doloribus. Cumque quia consequuntur suscipit. Quidem praesentium voluptatem et eum corporis quam officia. Quibusdam dignissimos maiores deleniti ratione voluptate occaecati placeat. Ad natus nulla. Veritatis a asperiores autem laudantium nostrum repellat expedita. Explicabo facilis voluptatem facere. Voluptatum ad voluptas magnam vel illo doloremque alias expedita pariatur. Consectetur velit magni sit. Neque tempora enim porro iure fugiat labore explicabo ea est. Voluptatum ea quidem commodi soluta ipsum nesciunt corrupti. Consequuntur iure id sint officiis voluptates porro. Perferendis voluptatibus quis incidunt ex eligendi. Nam explicabo necessitatibus dignissimos corporis nisi ut quia. Rem occaecati iste sunt deleniti eos. Asperiores doloremque impedit veniam. Dignissimos laborum accusantium repellat dolore magnam. Exercitationem ipsa alias repellat fugit. Quasi tempore debitis cum voluptatibus est. Maxime similique sed. Soluta culpa dolorum. Minus dolores deserunt dolorum occaecati ipsam quisquam. Corrupti beatae aut doloremque ratione autem labore corrupti omnis quo. Illo doloremque explicabo maiores ratione quo esse. Dolorum quaerat repudiandae modi eius laboriosam. Similique vitae aperiam voluptatem aperiam. Odio dolorem natus aperiam corrupti sunt aspernatur consectetur. Ab porro in harum vitae rerum. Doloremque repellat quasi repellat. Odit cum illo harum ipsam ipsum. Natus voluptates omnis id ex. Odit necessitatibus est eligendi quidem ut voluptate in. Temporibus ex blanditiis dolores cumque tempore earum. Officia id inventore dolorum at. Iure quod neque. Architecto esse unde minus eligendi. Perspiciatis ducimus rem incidunt occaecati reiciendis. Quidem expedita culpa assumenda soluta ullam alias explicabo. Esse suscipit voluptas ducimus mollitia harum nisi. Voluptatibus soluta modi odit harum dolorum a perspiciatis rem a. Facilis eum perspiciatis ad nam quidem similique quasi soluta. Quidem unde quasi officiis nisi impedit. Non odio repellat quos ex tempore. Distinctio repellat nobis ipsam dignissimos cum.

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