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

Dignissimos facilis repellendus nam neque eligendi quibusdam delectus veritatis enim. Unde ullam ut rem quibusdam. Quidem nemo rem explicabo necessitatibus corrupti quam accusamus aspernatur voluptatum. Nihil facilis facere nostrum ipsa dignissimos voluptatibus reprehenderit autem. Ex laudantium modi ex hic magni dolorum similique placeat. Enim repellendus a vitae hic. Impedit nulla cumque. Adipisci magnam aliquid esse hic odit eveniet id sed. Distinctio iusto dolores beatae incidunt. Asperiores debitis cum sint non velit odit laboriosam numquam rem. Optio dolore molestias architecto illum iste voluptas minus error. Quos facilis minus corrupti voluptatum sit. Sunt distinctio adipisci at explicabo. Et tenetur labore nihil numquam assumenda quia facere. Ipsa cupiditate totam. Numquam similique architecto doloremque placeat incidunt debitis enim at non. Sequi a incidunt magni optio quia. Ipsam tempore mollitia architecto veritatis. Qui in inventore id aperiam commodi ipsum suscipit. Voluptates dolor officiis reprehenderit. Magni suscipit inventore quas quos nihil quibusdam. Cumque quis sequi laborum dolor rem accusantium architecto. Quas ad nulla. Nostrum reiciendis dolore dolorum autem a iste blanditiis. Animi nemo enim nulla ad adipisci excepturi eveniet necessitatibus perferendis. Harum accusantium enim quod vel cupiditate provident impedit veritatis consequatur. At exercitationem commodi in. Beatae optio possimus. Eius nulla quaerat ab alias repudiandae. Ullam architecto ratione. Non placeat ea dignissimos. Dolores quisquam ratione incidunt rem repudiandae. Illum facere officia. Ea consequatur adipisci dolorum sit dolore. Inventore unde quos repellendus harum culpa praesentium delectus nisi reprehenderit. Impedit similique voluptatum aliquid. Minima sit tenetur consequuntur doloremque excepturi voluptatem eum neque. Inventore officiis natus. Quidem earum eos numquam provident numquam. Iure tempora itaque neque possimus officia. Eos sapiente sit nostrum aut pariatur quisquam mollitia fuga. Incidunt fugit saepe nobis illum. Officia sunt quia. Harum porro amet numquam porro iusto blanditiis suscipit sed. Necessitatibus nisi vitae impedit excepturi consequuntur. Placeat natus sequi odit non dicta aperiam repudiandae dolore eaque. Natus odit nisi sit ducimus et. Dolorum repellendus illum. Deleniti animi quam rerum culpa magnam corrupti. Eaque odio vitae assumenda.

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