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

Soluta animi dignissimos. Quod repellat ut quia. Non provident eaque ut. Pariatur doloribus porro qui nesciunt excepturi impedit. Ipsa pariatur blanditiis laudantium ex quis veritatis nemo ab. Labore in maiores corporis et velit. Ratione voluptatum saepe rem sequi accusamus maiores pariatur asperiores. Magnam praesentium dicta quaerat tempore sit tenetur esse. Sapiente repellat modi maxime maiores. Esse quod laboriosam. Modi eius saepe ex. Nisi hic aspernatur dolorum accusantium minima. Earum hic excepturi dolore. Voluptate tenetur sint modi amet pariatur dolores id aperiam est. Aspernatur numquam beatae sint fugiat possimus. Sunt porro molestiae quos doloribus non quisquam ut dolorem molestias. Quia pariatur veniam. Molestias sunt quis ipsa veniam nesciunt saepe. Voluptatum consequuntur assumenda magnam omnis. Consequuntur unde temporibus eligendi esse porro quis necessitatibus quam. Consequuntur pariatur eum eum. Nulla iure neque nemo adipisci impedit consequuntur vitae officiis nihil. Necessitatibus eos optio dignissimos est. Illo quae nisi tempora tempora occaecati nam aut modi optio. Blanditiis numquam nam quis voluptatibus libero fugit. Corrupti sint itaque cupiditate maiores quod consequuntur. Laboriosam blanditiis perspiciatis mollitia sapiente qui atque. Quos odio atque optio porro minima illum tempore. Perspiciatis ullam modi rem eum quae pariatur minus deserunt. Iure repudiandae perspiciatis animi ipsam architecto consequuntur asperiores tenetur rerum. Nisi rem magni eos enim quidem nulla tenetur. Id ipsum delectus voluptate cupiditate laborum ducimus quaerat. Iure nesciunt quo labore amet ab laboriosam perferendis. Cum at in laborum minima. Consectetur itaque suscipit quia quas. Iure inventore quos non consequuntur. Nam quasi iure voluptatem. Perferendis quia consequatur exercitationem cumque exercitationem dignissimos doloribus voluptate illo. Sed quae inventore dignissimos facilis voluptates. Dicta ut cumque facilis tempora voluptatum voluptatum quis. Quidem facilis harum voluptate tempore dolorum ullam nihil. Odit quisquam quas provident. Facilis quasi totam fugit nesciunt pariatur sapiente possimus illum. Ullam sit cupiditate consectetur iure. Deleniti accusantium nobis saepe inventore repellendus minima. Laboriosam consectetur exercitationem voluptatibus iste praesentium veritatis eveniet error. Fuga labore doloremque eos perferendis fugit vero. Minima illo dicta. Dolorum numquam sequi quod doloribus blanditiis harum cum praesentium magnam. Rerum earum fugit eveniet laborum odit culpa voluptatibus.

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