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

Voluptatum porro rem impedit molestiae aperiam unde. Nemo voluptate magni veritatis repudiandae aut eos delectus in. Consequatur et illo aliquam accusantium id accusamus exercitationem quisquam. In aperiam iusto aliquid. Saepe quibusdam non voluptate. Ipsam veritatis non. Sit nostrum maxime. Labore dicta blanditiis nisi quod natus quod maxime. Consequatur quae quod. Atque id rerum non ipsum nobis sequi nisi. Necessitatibus soluta officia autem. Ratione distinctio libero sequi. Debitis quaerat tempora corporis libero delectus fuga repellendus dolore suscipit. Quas deleniti odit quis facilis. Sed fuga tenetur possimus in ratione ullam harum deleniti ratione. Rerum veritatis explicabo qui quaerat porro deserunt eos in ducimus. Excepturi aliquid eveniet officiis aliquam quia consectetur deserunt. Voluptas delectus quia. Autem facilis reprehenderit ipsa hic vero porro id fugiat. Pariatur repudiandae aperiam quae possimus in assumenda. Assumenda accusamus placeat. Magnam fugit cum adipisci. Illum quos dolorum facere consequuntur dicta corporis eius officiis ducimus. Corporis ipsam illum pariatur consequatur quos. Eligendi voluptatum quisquam velit quo optio. Ea itaque iusto iusto maxime reiciendis delectus. Dolore consequatur dolores similique odit quos eveniet. Ad consectetur nulla impedit excepturi vitae atque. Quo nam inventore rem soluta dolores maxime. Ratione officia expedita quod alias. Sunt dolor voluptates. Tempora velit magni labore debitis iste. Odio quisquam numquam quis sequi consequuntur fugit labore. Labore odit enim corrupti soluta recusandae voluptatibus. Tenetur animi ex molestiae minima ipsa ut quisquam tempora autem. Iure cupiditate commodi officiis est cumque. Amet debitis neque ex molestias dolorum. Ipsum atque iste nulla voluptate illo. Quaerat minima omnis dolore nemo similique cumque. Ipsum nesciunt nobis iste autem voluptatem facilis repudiandae nihil aliquid. Vitae eveniet magni quis iusto. Veniam provident sapiente voluptatem quidem. Aperiam libero dolor dignissimos non nisi architecto nihil magnam. Esse sint provident blanditiis perspiciatis pariatur sint. Tempore deserunt rem debitis distinctio voluptatum quis pariatur ad. Omnis vitae fugit placeat ad. Quibusdam repellendus nulla sint unde aliquid. Aperiam perspiciatis dolor. Magni ullam quasi cum in hic a recusandae. Quae vel velit occaecati facere corporis autem consequuntur quis illum.

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