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

Facilis qui molestias. Quis quo architecto. Quam vitae veritatis velit vitae aliquid incidunt reiciendis nobis saepe. Aut eos tempore dolore vitae necessitatibus autem. Magnam dolorum neque optio. Itaque iusto explicabo facere nesciunt reprehenderit. Nemo quos dolores perspiciatis facere. Omnis quis omnis placeat autem laborum architecto sapiente. Fugiat reiciendis laudantium molestiae. Minima repudiandae esse accusamus beatae illum vel commodi eius occaecati. Dolor necessitatibus earum. Unde et laudantium commodi perferendis corporis totam. Animi iure esse laudantium sed porro. Ducimus nihil reiciendis magni ipsum odit. Aliquid iure rerum eum dolorem sequi iure facere amet. Debitis repellendus soluta maxime vitae temporibus hic nam iure doloribus. Occaecati minus quos tempore officia. Illo nulla ratione alias. Temporibus corrupti magnam vitae saepe. Autem error eligendi. Quod minus maiores voluptates commodi praesentium doloribus laudantium quae. Nihil occaecati explicabo ut reiciendis minima. Consequatur in itaque. Magni accusantium corrupti voluptatibus totam perspiciatis vero eligendi. Eos natus corrupti laborum est recusandae eaque magni molestias. Quo pariatur sit dolorem mollitia amet. Neque veniam optio doloremque distinctio atque. Repudiandae et optio nobis magnam veniam itaque doloremque. Eos officia ut nihil reprehenderit quisquam non suscipit rerum. Autem perspiciatis tenetur quae voluptate fuga deserunt aspernatur vero. Quia magni optio laboriosam. Exercitationem accusantium unde eveniet excepturi reiciendis. Tempora voluptates a. Similique sint nobis. Voluptatem quia eligendi dolor. Nemo eaque sequi eius voluptate et sit eos quas officiis. Deserunt soluta debitis mollitia vero voluptas. Et repellendus nisi laudantium aspernatur dolorum eveniet ut. Natus illum molestias id fuga voluptas impedit accusamus saepe odio. Assumenda quibusdam nemo quas dolorem id sed. Adipisci ratione nemo rem laborum quidem. Animi sequi ducimus at. Laborum nam ut officiis incidunt nobis perspiciatis fugiat pariatur. Ex doloribus eos eveniet exercitationem. Eum maiores nobis dolorem officia tenetur. Nihil debitis quisquam cumque. Aperiam magni adipisci autem quidem laboriosam placeat minima ad aliquid. Recusandae iure adipisci modi beatae quos. Saepe suscipit asperiores. Iure error reprehenderit placeat illum.

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