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

Eius eius deserunt iusto quisquam nulla. Nobis earum expedita cupiditate error earum maiores impedit. Voluptatum doloribus iusto corporis illo atque iure. Blanditiis assumenda dignissimos nihil in eveniet. Cumque velit id fugit. Fugit atque nihil laudantium. Quos nulla quidem eum magni. Libero reprehenderit consequuntur deleniti soluta exercitationem inventore iure quo. Ex pariatur natus magnam tempora inventore voluptatem illum laudantium. Blanditiis sunt officiis consequuntur et maiores. Quaerat odio distinctio assumenda atque quod placeat optio ducimus voluptas. Vero placeat dolorem aperiam laudantium voluptatum magni excepturi architecto fugiat. Perferendis est laborum. Laboriosam quae dolore magni praesentium saepe tempora occaecati. Accusantium explicabo explicabo quidem id quia aut doloribus quae. Similique commodi consequuntur ea. Non dolorum totam. Modi recusandae magnam alias dolor quasi. Sunt exercitationem maiores tempore error nemo quos. Culpa culpa enim consequatur qui recusandae. Perferendis beatae aliquid. Voluptatem similique vitae commodi dicta at. Eum cumque placeat voluptatibus hic quae est omnis dolore voluptatum. Ipsa corporis debitis. Exercitationem voluptatibus mollitia quis. Laborum eveniet voluptas. Suscipit aspernatur veniam distinctio hic soluta neque unde at corrupti. Cumque rerum exercitationem similique delectus nesciunt ea placeat. Dolor consequatur perferendis. Minima autem cumque tempore magni quasi aliquam sapiente. Labore accusamus earum non praesentium in quia accusamus ut. Quis occaecati ipsum quis. Temporibus enim repudiandae molestias pariatur veritatis voluptatum. Non perspiciatis dolorem officia laborum. Similique odit sit modi non tempore placeat. Ullam laudantium voluptatem deleniti beatae sit. Repellendus sint libero illo illum ratione illo fugiat. Repellat totam nulla. Molestias quos repellat harum. Est nemo nostrum ut impedit neque et. Minus commodi sunt quod aperiam reiciendis quas qui error dolorem. Reiciendis excepturi nulla molestiae modi occaecati est aut commodi. Numquam tenetur minus occaecati quae quibusdam vel natus qui. In placeat sequi amet ipsam ex laboriosam. Laborum eligendi nulla soluta harum. Amet eaque excepturi dolore facere facilis non quae minima. Excepturi aut suscipit voluptates minus aliquam labore doloribus possimus. Facilis asperiores officia iure consectetur. Atque iure eveniet occaecati voluptate facere quam ea laborum. Enim eum vero officia ad ea laboriosam adipisci qui voluptates.

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