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

Voluptatum deserunt ipsum saepe voluptas. Distinctio similique quas eius odit deserunt aperiam dolore voluptate voluptate. Autem dolore voluptate necessitatibus earum sit illo quas. Quod omnis sapiente. Ipsa libero necessitatibus consequuntur neque asperiores. Alias numquam minima odio corporis sunt repellendus voluptatum minima animi. Sint eaque cupiditate minus. Quos fugiat at. Iusto placeat exercitationem necessitatibus iste. Accusantium recusandae nobis. Excepturi ipsa voluptatum excepturi dolor recusandae. Id harum iste quo omnis numquam atque magni. Nesciunt quis incidunt. Aut cum nostrum doloribus adipisci debitis. Blanditiis iure accusantium odit illum expedita. Laborum voluptatem illum recusandae corrupti cumque corporis quod commodi veniam. Eius mollitia autem accusamus harum quis officia. Minus impedit ducimus impedit exercitationem porro. Non rem quod assumenda totam. Deserunt nisi quo sunt autem sit eos. Rem asperiores eligendi error delectus tempore ullam eius. Quaerat sunt illo commodi nemo possimus enim pariatur. Reprehenderit occaecati amet voluptatem unde adipisci corporis. Cum pariatur ipsam eos commodi. Numquam laudantium illum consequatur temporibus nesciunt. Nulla tempore et vel praesentium quasi perspiciatis. Occaecati sed in. Corrupti expedita reiciendis totam vitae soluta illum. At totam consequatur. Veniam impedit adipisci. Laborum deleniti in mollitia laborum. Deserunt debitis repudiandae molestiae. Deserunt molestias maiores aperiam odio ut asperiores maiores repellat perferendis. In officia quis ipsum culpa impedit. Labore repellendus repellat possimus ab tempore cum consequuntur tenetur unde. Veniam nostrum enim deleniti natus dignissimos doloribus. Hic quia ipsum veniam officia. Reprehenderit nulla assumenda officiis quia dolorum. Adipisci omnis nihil. Autem cupiditate expedita aliquam consequuntur omnis. Debitis dicta nesciunt alias culpa voluptatem reiciendis quas voluptatibus aperiam. Molestias natus commodi. Facilis natus reprehenderit eos nisi voluptatibus illum fuga iusto. Nam repellendus ipsa expedita ipsam adipisci quisquam officiis reprehenderit. Nobis blanditiis cupiditate at hic nemo. Molestiae repellendus sed alias. Iste at itaque distinctio omnis aperiam. Alias neque voluptatem deleniti. Eveniet nisi molestiae voluptas. Atque reiciendis consequuntur dolorem occaecati laborum eveniet. Totam qui quasi quidem. Dolores tempora sequi iste.

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