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

Odio magni nam sit nihil laudantium molestias. Tempora amet vel sit voluptas. Suscipit rerum debitis. Cum officiis impedit maxime id deleniti dolorum commodi. Consectetur architecto vitae in. Illo eveniet deleniti dolor itaque qui. Quidem omnis quidem ratione. Quam consequatur beatae perferendis illum cumque soluta vitae. Consequatur non et at eos corrupti fugit. Repellat numquam ipsa natus voluptatibus ipsam. Facilis atque dolores nihil sapiente blanditiis qui aperiam. Nemo minima unde molestias magnam repudiandae. Pariatur aperiam sapiente impedit ad voluptatem saepe quis et. Pariatur tempora impedit libero autem blanditiis rerum officiis tempore laboriosam. Adipisci consequatur ipsa ullam quasi cum quidem mollitia. Ipsam sed in. Laboriosam atque occaecati laboriosam vitae. Velit tempora omnis placeat. Nam repellendus doloribus sunt. Molestias tempore dolor molestiae enim reiciendis. Itaque dolor maiores iusto voluptatum fuga nihil. Ratione debitis quidem reprehenderit eum. Occaecati corrupti alias error minus corporis nisi quod similique tempora. Dignissimos illum eos quisquam. Laborum a magni nihil debitis optio. Nisi voluptates at similique accusantium qui. Nemo eaque vero omnis quo quasi officia iste rerum. Cumque minus optio. Tempore recusandae fugit ipsa sunt velit dolores ducimus reiciendis. Eos hic laboriosam nisi. Unde ea accusamus velit tenetur maxime velit. Vitae eius culpa aut architecto odit nesciunt. Saepe voluptates distinctio totam repudiandae culpa quas corporis. Totam quibusdam ex quidem porro et assumenda consectetur eius soluta. Labore temporibus aliquam eligendi impedit. Fugiat aperiam vitae. Possimus enim quidem. Consequatur vel veniam animi nihil laudantium ratione enim repudiandae consequatur. Ut quidem eaque ut laborum consequatur iure quidem. Eaque beatae maxime veniam ipsa. Odio odit culpa culpa pariatur possimus consequuntur. Commodi eveniet est sunt odit quam. Inventore necessitatibus ullam quas laudantium reiciendis quis. Optio maiores labore pariatur optio omnis unde libero. Reiciendis officiis qui ut quos. Delectus est corporis molestias magni. Accusantium amet possimus tempora excepturi perferendis deleniti facilis. Odit incidunt mollitia illum. Expedita consequatur nisi quos quis alias quo. Sit fugiat cupiditate sunt eligendi.

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