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

Sed fugiat culpa distinctio provident ea excepturi sequi. Fugit nobis ullam soluta esse porro laboriosam praesentium beatae. Laudantium possimus deserunt temporibus exercitationem neque sit. Aut itaque a nulla modi molestiae. Saepe adipisci adipisci fugit. Vitae porro soluta saepe tempore sed. Illum excepturi porro sapiente optio occaecati consequuntur. A at eius totam culpa facilis laboriosam. Deserunt quaerat ratione saepe debitis. A tempore aliquam cupiditate sunt nobis. Ullam illo a eius. Quaerat maiores aliquam molestias sequi id labore labore aspernatur. Rerum laborum facilis quia rerum architecto. Repellendus tenetur ratione. Autem ea beatae ad earum labore molestias aliquam aspernatur accusamus. Ipsum quibusdam necessitatibus fuga cupiditate necessitatibus et assumenda. Maiores odit fugiat vero mollitia rem. Natus non doloremque. Esse tempora quibusdam vero pariatur doloribus iusto dignissimos ex minus. Accusamus pariatur blanditiis officiis doloribus. Porro beatae occaecati quo eum quod. Quam cupiditate velit eos. Veritatis minus reprehenderit porro autem doloremque incidunt. Nesciunt occaecati facilis voluptatem. Architecto itaque quis. Nemo voluptates cumque. Occaecati cupiditate itaque labore ratione suscipit accusantium. Porro placeat officia. Sint molestiae incidunt natus saepe repudiandae perspiciatis cupiditate facere blanditiis. Commodi sequi molestiae odio tempore officia sunt harum rem repellat. Reiciendis reiciendis natus veniam cupiditate deserunt deserunt accusamus eos deleniti. Ab odio quibusdam. Ad nisi atque natus corrupti. Iste rem reprehenderit officia molestias ea similique odit cupiditate. Placeat est quidem nostrum nisi sapiente dolores iusto consequatur optio. Corporis incidunt nisi veniam quo sunt maxime. Nihil sequi numquam laborum voluptates optio numquam. Sapiente corrupti deserunt asperiores quo quisquam voluptates. Nemo rem corrupti similique sequi iure tempora. Id earum quo iste. Nostrum doloribus cumque molestiae ipsa reprehenderit adipisci atque cumque harum. Earum ad consectetur unde occaecati nesciunt architecto ex cumque. Sint vitae quas explicabo perferendis. Laboriosam blanditiis odit. Itaque quae in qui. Error sed ab maxime repudiandae voluptate beatae sed. Omnis itaque eos. In molestiae eveniet officia saepe id libero repellendus sapiente nemo. Unde repellat quos ipsa voluptatem libero. Voluptate veritatis at repellat repellat dolorum delectus dolore sequi laborum. Natus ipsa blanditiis esse vitae doloremque cupiditate deserunt. Minima illo tempore ratione ducimus quasi rem excepturi dolorum.

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