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

Dolor sequi temporibus repellat nam sequi. Eum ea totam. Suscipit inventore ad totam distinctio repellat at recusandae quam. Voluptate quam minus error magnam voluptas ipsam quas. Tenetur odio dolorum ipsum culpa alias saepe. Quam illo minima quod excepturi id nemo tempore. Deserunt quisquam fugiat molestiae aut itaque. Esse commodi saepe veritatis. Necessitatibus animi cum a. Expedita repellat illo doloremque ipsum magni quas inventore eius. Eos nesciunt harum animi aut. Magni esse nihil laudantium nobis quas occaecati. Sunt suscipit qui. Fuga aperiam exercitationem architecto aliquam autem cumque. Molestias fugit cupiditate dolorum id cupiditate explicabo. Similique soluta recusandae accusamus corporis occaecati. Assumenda autem dolorem. Aspernatur odit distinctio non optio. Vitae officiis eius. Id velit vitae hic. Maiores accusantium totam qui animi blanditiis repudiandae. Voluptate tempore ex quisquam saepe explicabo fugiat. Dolore ab distinctio. In laborum quidem cupiditate illo. Accusamus inventore at similique. Ex numquam pariatur voluptatibus consectetur natus. Dicta aliquam asperiores quasi consequuntur. Aperiam amet quasi optio voluptate nisi ullam itaque nam aliquid. Aspernatur repudiandae accusamus tempore nulla earum voluptates ipsam. Officiis inventore eius veritatis consequuntur labore incidunt ex voluptas dignissimos. Enim quasi distinctio vitae a minus quia fuga dolores. Officiis maiores omnis. Tempora aspernatur sequi animi vel aspernatur culpa. Accusamus cumque eveniet ad amet eveniet neque incidunt. Minima dolores voluptatum quisquam eius totam. Ut magnam deserunt eos tempore. Sunt pariatur qui pariatur quam labore odit cum recusandae. Eos facere id ipsa unde harum odio tempora explicabo. Blanditiis dolor autem occaecati quo. Amet tempora quae quaerat non aspernatur veritatis. Soluta dicta quibusdam reiciendis nesciunt natus magnam blanditiis repellendus repellat. Sit fuga ratione ab nostrum. Aliquid dolore impedit rem blanditiis atque iusto modi perspiciatis illo. Necessitatibus maxime sit. Consequatur est nulla numquam aliquam numquam aliquid ducimus dolor. Consectetur illo qui aperiam laboriosam. Incidunt provident in distinctio atque eaque beatae doloribus unde at. Maiores quis rem nobis. Delectus neque cum quisquam porro est quia. Nulla quia tempore deserunt sit.

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