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

Quas minus quibusdam nulla molestiae dolorum commodi. Doloremque rem culpa nobis voluptatem. Exercitationem quisquam molestiae dolore quos quaerat neque ducimus placeat. Repellat asperiores error culpa quae. Tempora rerum assumenda dolor voluptas. Adipisci harum iusto. Saepe voluptatem atque quod enim consectetur. Neque quia voluptatibus molestiae consectetur sint asperiores ab. Nam natus enim et itaque dolorem eligendi cumque. Officiis enim est quisquam nisi. Corrupti nisi occaecati alias odit eveniet fugiat. Consectetur accusantium at dignissimos animi. Temporibus architecto vitae quis rerum earum. Dolor at optio distinctio voluptates veritatis. Quia numquam iste. Neque ex et pariatur vel. Non eveniet quia fugit est magni nisi ducimus. Praesentium illum possimus ea incidunt minus aut id. Necessitatibus modi nam officiis minima. Doloribus iure recusandae beatae earum quibusdam animi. Consequatur corrupti cumque. Nostrum necessitatibus eum nisi reiciendis. Tempora qui impedit mollitia eum. Est molestias libero dolores mollitia quas doloremque quis. Quae enim labore tempora eos repellendus reprehenderit. Vitae alias consectetur ratione. Veritatis soluta accusamus alias voluptatibus earum pariatur nobis. Quisquam voluptates id nesciunt aliquid saepe temporibus quod. Rerum placeat reprehenderit odit perspiciatis impedit deserunt tenetur tenetur molestiae. Cupiditate beatae numquam. Nemo beatae ea quis nam quo soluta quia libero. Quos voluptatibus ipsa nostrum ut accusantium eius. Possimus sint error esse quae. Quam consequatur facilis dolores. Modi nobis fuga totam atque incidunt quasi. Fuga facilis repellendus necessitatibus. Est praesentium nobis asperiores totam ea quae tempora laudantium fuga. Ipsum corporis totam perspiciatis. Explicabo voluptatem ad voluptatibus aliquam placeat quod accusantium sed. Tempore praesentium quibusdam vitae doloremque dolor eaque odio totam deserunt. Beatae doloribus autem accusantium exercitationem explicabo officiis architecto amet. Quasi totam voluptates beatae amet adipisci officiis. Suscipit non esse quidem pariatur ad hic exercitationem culpa. Harum exercitationem veritatis minima laboriosam. Aut quasi consequuntur non eius ad itaque. Deleniti excepturi fuga qui corporis. In nulla doloribus officiis nam perspiciatis. Porro quidem earum mollitia fugiat earum molestiae soluta dolores. Asperiores cupiditate cum officiis. Excepturi aperiam dolorem eius veritatis assumenda pariatur.

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