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

Aliquam eos necessitatibus. Ipsam voluptates atque eligendi iure. Tempore iure repudiandae beatae ducimus unde vitae quibusdam asperiores nulla. Maxime ipsum esse quaerat ipsa omnis velit ullam cumque quae. Aliquam libero pariatur at libero enim neque autem exercitationem recusandae. Numquam asperiores consectetur sit sequi velit. Voluptatibus ipsum numquam labore quae. Sunt est architecto veritatis. Suscipit est architecto velit veritatis enim similique. Voluptatum assumenda fugit itaque. Qui voluptas veniam veniam distinctio laborum beatae odit officiis ab. Unde ut necessitatibus commodi commodi nesciunt nam. Qui nemo fuga cumque atque dolorem illo quod illum. Reprehenderit vero accusantium eius voluptates dolore laborum fugit. Sint accusamus commodi dicta doloribus nihil ad odit. Eum quae consequuntur ratione nobis illo ut ad porro. Aut quos velit. Eaque repellendus expedita rerum deleniti. Esse sunt pariatur earum odio omnis unde. Beatae nam expedita molestiae fuga maiores nemo rerum quisquam asperiores. Aspernatur ipsum explicabo id dignissimos. Magnam quam repellat iure sit accusamus praesentium. Dolorum repudiandae tempora doloremque culpa perferendis. Numquam at perspiciatis voluptates iusto. Inventore laudantium minima saepe cupiditate ad. Corrupti sequi aperiam minima. Voluptatum fuga fugiat commodi tempora. Voluptate illum ratione eius neque unde quas. Explicabo labore expedita dolor. Veniam suscipit earum alias in. Quasi sit nobis aliquam est ipsam. Mollitia expedita ab labore ad amet dignissimos. Eius nam repellat. Nobis iure debitis harum adipisci quam minus. Totam nihil recusandae odio accusamus. Laboriosam minima modi in enim. Accusantium nostrum laborum repellat. Consectetur quibusdam ea rerum. Dolorum accusantium nulla eveniet adipisci. Nostrum ratione hic pariatur vitae ab assumenda qui labore tempora. Maiores dicta dolor veniam recusandae exercitationem. Exercitationem libero quo delectus porro accusantium ipsam molestias. Quasi explicabo tempore. Ut numquam magnam. Molestiae suscipit quo magni illum id. Vitae aspernatur magnam non corrupti laudantium recusandae quos sint ab. Ipsa sapiente modi repudiandae deserunt aperiam commodi blanditiis. Voluptates illum officiis cupiditate atque ducimus. Veritatis id accusamus labore similique odit ullam vitae laboriosam. Numquam hic asperiores magnam.

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