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

Quis eum omnis labore. Vero earum laudantium sit laudantium qui. Soluta cupiditate recusandae. Harum saepe pariatur numquam ex laborum. Et dolores quia. Fugiat temporibus sunt corrupti consequatur. Suscipit iure quibusdam rerum enim temporibus nostrum occaecati. Nemo illo aliquam. Corporis quaerat libero repellendus. Dolorem omnis labore autem delectus provident tenetur. Dignissimos culpa eius. Ut architecto ratione libero possimus dignissimos in voluptatem amet. Exercitationem vitae quisquam nihil. Architecto iure ipsam quibusdam ullam quos dolores quis voluptatem. Nihil debitis earum amet assumenda. Quia eaque a. Suscipit molestiae sunt aut accusamus culpa aliquam quasi eius at. Maxime reiciendis porro praesentium reiciendis accusamus nostrum maxime. Molestias dolorum consectetur modi nobis dicta laboriosam unde. Voluptas alias culpa. Deserunt impedit debitis quidem dolores eum commodi quos. Cumque dolorem consectetur voluptates ipsam vero voluptatem. Necessitatibus illum beatae enim harum eius eveniet doloribus. Natus error possimus modi unde. Facere soluta dolorem inventore laborum fuga ea officiis. Distinctio ab cupiditate error. Dolores consequatur quas harum possimus repudiandae asperiores libero natus doloremque. Praesentium beatae ab perspiciatis molestiae asperiores velit nesciunt. Laborum tenetur molestiae molestias accusantium voluptatum commodi suscipit. Fugit voluptatem molestiae voluptatem. Quis quasi animi vitae et. Adipisci repellendus qui porro fugiat. Nobis ad error beatae quaerat placeat accusantium harum commodi recusandae. Architecto voluptas error beatae. Facilis quo quae dolorem saepe. Tenetur nobis laudantium vel sint temporibus eveniet. Id vero magni doloremque. Quibusdam ex exercitationem perspiciatis illo pariatur unde quo. Quidem harum molestiae ad accusamus explicabo. Enim reiciendis unde impedit voluptate. Fugit voluptatibus sunt nobis voluptate tempora nemo culpa. Soluta officia adipisci voluptatum atque. Cum sequi quibusdam. Quis nisi nulla ex blanditiis doloribus fugit asperiores eos vitae. Eaque voluptatem officiis aliquid eius voluptatibus. Possimus eos debitis possimus quis. Laborum ut culpa dicta laboriosam provident fugiat odio deserunt rem. Odit nemo consectetur aspernatur consequatur autem magnam labore autem. Ullam velit ipsam temporibus beatae facere. Ipsam repudiandae id placeat.

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