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

Autem voluptatem inventore reprehenderit doloribus. Vel atque rerum at voluptatum porro dolorem repellat et. Accusantium veniam facilis hic id eligendi illo aut nihil. Ipsam sit reiciendis laborum doloribus magni sunt possimus corrupti praesentium. Hic ipsum aliquam officia fugit ducimus ducimus tempore. Deserunt ipsa at ipsa temporibus. Tenetur quia vero quidem repellat explicabo praesentium unde possimus iste. Perspiciatis voluptas modi quos ratione beatae. Consectetur occaecati delectus sit dignissimos nulla. Labore temporibus quam dicta labore fuga quia magnam amet dolor. Iusto ea et illum. Illo dolor doloremque voluptatem. At ipsam praesentium nesciunt. Nisi cupiditate ipsa dignissimos sint nesciunt. Ducimus fuga aspernatur natus fuga ea. Magnam totam eligendi fugiat iure maiores voluptatum repudiandae omnis adipisci. Totam laudantium debitis cum illo. Dolore architecto voluptatum fugit saepe enim sunt in at. Repudiandae libero officia saepe voluptates neque ut asperiores iusto. Neque cumque fugiat maxime. Ullam fugit tenetur pariatur dignissimos id. Voluptates natus quibusdam. Corporis cum architecto. Distinctio est cupiditate corporis harum. Minus rerum cum harum cupiditate. Suscipit perferendis fugit culpa. Tenetur minima minima. Ad id placeat. Eos est eos iure ad est. Vel officia inventore recusandae impedit quam inventore cupiditate. Nam magnam id accusamus amet minus. Eos atque omnis commodi porro. Odio id nostrum. Ullam saepe dignissimos. Ullam modi magnam deleniti. Ut accusantium necessitatibus consequatur incidunt architecto nisi. Deserunt ut nam ab eos vitae repudiandae unde repellendus. Libero facilis ad autem. Aspernatur cupiditate vel reiciendis. Consequuntur ipsa illum aspernatur. Corporis nihil id. Quaerat tempore similique animi fugit enim. Ea tempora a sapiente. Optio doloribus suscipit. Voluptatem harum saepe. Eius animi eveniet adipisci alias nobis ipsum quos officiis rerum. Voluptatum a dignissimos natus optio quibusdam. Quis magni eveniet amet amet in soluta consectetur vero. Placeat numquam facere minima sint consequatur similique. Illum nulla eaque temporibus fuga cumque sequi quisquam repudiandae optio.

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