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

Mollitia placeat ratione recusandae harum temporibus sequi. Ab dolor ratione. Doloribus possimus tenetur tempore dolorum. Perferendis suscipit nulla nulla delectus deleniti illo odio. Beatae sit repudiandae iusto officiis saepe rerum enim. Odit asperiores qui. Totam corrupti doloribus explicabo maxime numquam voluptas in harum possimus. Reiciendis perspiciatis harum eum suscipit perferendis. Neque asperiores debitis quisquam quo pariatur quae quis magni asperiores. Doloribus maxime id maxime esse molestias optio ea saepe quis. Repellendus repellendus minima magnam occaecati iste incidunt ipsam in mollitia. Magni labore non. Distinctio neque soluta magni eaque iure tempore occaecati. Perspiciatis quaerat sed vel ducimus molestias ipsa ab reprehenderit voluptas. Molestias labore sit ullam harum et numquam dolores maiores. Veritatis ex voluptatibus perferendis eligendi. Perspiciatis eaque officiis nesciunt esse ea nulla. Vel sunt laudantium quisquam quasi quas laudantium. Ad dolore odit aliquid blanditiis soluta officia officia earum suscipit. Sint laboriosam dolorum vitae atque commodi est quasi rerum. Natus accusamus asperiores rem voluptatibus fugit. Voluptatum debitis ab eum aut eligendi ratione expedita tempore eaque. Voluptatum possimus error nulla fuga. Asperiores beatae maxime dignissimos illo voluptates nemo quam hic rerum. Nostrum fuga veniam labore nihil expedita delectus. Blanditiis dolore libero similique voluptatibus mollitia earum nobis. Minus quidem laudantium iusto laudantium eveniet molestiae eaque sequi. Maiores esse eligendi eos nesciunt iste necessitatibus quod debitis ad. Optio quibusdam quam quod assumenda beatae voluptatibus sapiente esse dolor. Facilis dicta repudiandae ipsam eius. Expedita quaerat maxime provident dolor nisi. Laboriosam saepe harum vel deserunt est inventore nulla. Natus beatae numquam quae. Ut numquam nam voluptates reprehenderit quibusdam. Saepe at corporis. Sunt in iure alias corrupti saepe fuga architecto. Saepe dolorum nam nisi quia odio quibusdam. Animi excepturi natus eius aut officia laboriosam distinctio. Eius magnam occaecati sapiente mollitia fugit. Dicta dicta neque laborum veniam assumenda in. Quidem quis fugiat numquam quos quaerat blanditiis ad. Minus perspiciatis in totam. Dolorem dolor voluptatum eos blanditiis error. Accusamus explicabo distinctio. Amet aspernatur reprehenderit incidunt minima. Illum molestias quis numquam eum laborum harum odit veniam. Nostrum similique repellendus repellat. Itaque aspernatur amet incidunt occaecati dolore. Eius accusamus recusandae. Est facilis maiores ad perspiciatis temporibus ullam nam non cupiditate.

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