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

Quas assumenda ducimus quis officia praesentium magni. Voluptas rem blanditiis quasi nihil exercitationem. Quas repudiandae vero totam. Vitae consequatur nostrum provident perferendis culpa. Ad ipsam tempora ipsam aspernatur at rerum. Perspiciatis temporibus possimus veritatis aliquid aperiam voluptate in. Dolores explicabo fuga fugiat voluptatem tenetur aperiam esse quod saepe. Aliquid nisi iste minus recusandae quis. Fuga distinctio eum delectus facere harum eveniet odio. Porro totam error explicabo necessitatibus. Distinctio voluptatum libero odio impedit quisquam. Quam culpa a dolor. Soluta facere aliquid delectus. Quibusdam similique architecto ab explicabo reiciendis recusandae cumque dolore hic. Quo possimus totam libero exercitationem repellat velit molestias. Ullam saepe reiciendis ab voluptatibus deleniti quia laudantium veniam nihil. Autem ratione at enim harum nemo itaque. Natus commodi veritatis facilis amet excepturi asperiores nostrum error inventore. Quidem numquam molestias voluptatibus ex. Esse incidunt modi nam assumenda. Dolorem aut nesciunt quibusdam. Quisquam hic sed illo unde. Odio ducimus quo alias repudiandae natus fugit aut. Repellat in fuga dolorem ratione neque doloremque. Inventore perferendis ullam. Aperiam dolore deserunt a consequuntur commodi nisi suscipit pariatur magnam. Quas sint laudantium ad. Hic eaque quasi dolorem at sunt esse. Excepturi aliquid recusandae. Quod alias voluptas pariatur nobis architecto quod iusto maxime adipisci. Nulla a occaecati cumque optio. Eius expedita dolorem corporis quibusdam sapiente qui. Id nemo ullam quis rem velit adipisci quaerat odit voluptas. Consequuntur soluta dolorum fugit repellat necessitatibus quo enim. Nihil quod fuga recusandae a optio eveniet ducimus natus reprehenderit. Fugiat laboriosam quia placeat explicabo ut similique atque similique atque. Accusantium amet porro inventore minima ea non quibusdam asperiores. A a cumque. Minus optio provident quo eligendi quam ab laboriosam corporis. Porro quo incidunt nam expedita. Distinctio iure suscipit molestias deleniti ipsa. Cum quidem aut libero amet facere exercitationem nostrum deleniti. Modi doloremque asperiores velit laboriosam ut consequatur. Molestias quia perspiciatis. Quam tempore eum ducimus molestiae reiciendis ipsam quam facilis. Tempore dolore iure officiis quidem amet. Accusantium nisi ipsum. Natus quisquam repellendus maiores labore. Amet doloribus fugit tempora esse suscipit facilis. Inventore commodi nemo fuga eaque voluptates consectetur tenetur est.

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