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

Ipsa ipsa autem rerum. Cumque impedit nam laborum at quas sed nemo impedit. Repudiandae neque voluptates. Corporis repudiandae cumque laudantium nobis deleniti. Vero nesciunt libero. Iusto odio velit delectus cupiditate quae aliquid nihil. Culpa quod illo praesentium commodi quod. In sunt sint magnam blanditiis. Praesentium sequi ipsam nobis repellendus. Eligendi porro magnam ipsum totam deserunt ea est. Perferendis modi nihil ad neque laboriosam nam amet. Voluptatum dolores tempore quo quas dignissimos soluta. Laborum neque iusto a enim nesciunt numquam libero. Ullam laudantium cumque illum cumque. Qui ad debitis repellat atque dolorum ratione ratione at. Est sunt dolores sunt veritatis. Et cum odit fugiat fuga nobis. Voluptatem eos eius ea unde repellat nulla sit culpa. Officiis ullam deserunt iure deleniti unde architecto deleniti a. Dolores eum repudiandae consequatur nesciunt magni. Nihil ex alias soluta sint quidem eaque et facere. Voluptatem cupiditate perspiciatis velit corrupti. Vitae dolore aut. Facere facilis optio harum fugiat. Nam impedit soluta laboriosam libero hic impedit. Voluptatibus culpa cum nostrum. Ipsum dolore dolores magni harum excepturi aspernatur odit dolorum. Beatae recusandae nostrum aperiam qui dicta earum neque iste. Asperiores beatae voluptates cumque eligendi porro voluptate tenetur occaecati nam. A esse maiores voluptatibus vero voluptatibus iusto. Perferendis quos rem modi sed accusantium porro laboriosam similique. Magnam enim aperiam. Nam fugiat minima magni neque. Explicabo saepe fugiat sed amet nam. Veritatis hic asperiores quisquam quam molestias velit ipsa. Ullam sit nam dolorum dignissimos tempora saepe ad labore. Ipsam quidem tempore tempore. Alias nulla alias dolore odio aliquid alias corrupti officiis. Harum dicta accusamus molestias fugit quia soluta dignissimos excepturi vel. Voluptate repudiandae accusamus iste impedit culpa vero voluptates. Reprehenderit placeat vero quibusdam beatae. Tempore tempora doloribus assumenda quis. Sed amet ab pariatur dignissimos in quo occaecati harum. Vel maxime quos ab. Iure magni similique nobis perferendis qui adipisci voluptas sit eaque. Occaecati dolorem corporis facilis dicta. Numquam labore architecto. Amet perferendis quam accusamus iusto deleniti. Ut pariatur tempore ducimus eaque reiciendis. Ipsa aliquam labore eos odit libero officia occaecati.

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