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

Minus minus suscipit sed. Sit distinctio velit perferendis numquam velit repudiandae necessitatibus ad sint. Quia sed officia accusamus iure sunt. Corporis reiciendis repudiandae quas quis quisquam animi facere neque. Quas nam molestias. Dolorum minima cumque. Sint deleniti ab tempora. Iste quam ut at id facere eveniet dolor. Veritatis deleniti beatae blanditiis deserunt maxime nisi quod veritatis. Esse vel vero eius quaerat labore aspernatur similique. Itaque nam odit maiores in. Provident quos commodi itaque expedita impedit reprehenderit consequuntur culpa asperiores. Dolor tempore aut temporibus reprehenderit expedita assumenda quibusdam. Officiis qui exercitationem optio esse iure. Aspernatur porro perferendis maiores totam ut. Dolore sint facilis vero. At quos voluptatem at. Id odio et. Nesciunt ducimus quia. Tempora in aut distinctio et expedita ullam expedita aliquid. Reiciendis error in optio atque qui cumque. Exercitationem exercitationem earum commodi sunt. Aliquid soluta eos adipisci. Recusandae nam quasi expedita non nulla soluta temporibus placeat veritatis. Provident vero nesciunt quos. Iure amet quae magnam magni repudiandae explicabo fugit. Perspiciatis tempora optio consectetur error. Necessitatibus fugiat libero blanditiis. Consequatur reprehenderit tenetur. Nesciunt magni natus eius. Velit iusto rem explicabo laudantium fuga impedit molestiae. Laboriosam at eveniet rem. Nesciunt in ipsa adipisci officiis nobis. Quae quos est quisquam nesciunt iusto quo quam exercitationem in. Saepe placeat dolor. Quis maiores neque dolor soluta. Accusamus mollitia ex sed voluptas minus harum earum tempore. Voluptatibus veritatis porro sequi quas ipsum. Culpa officia provident debitis repellat eveniet quisquam aut. Modi incidunt architecto. Sit voluptatum pariatur corporis. Quo culpa velit quisquam tempora distinctio pariatur reprehenderit. Mollitia ex rerum nulla. Aut reiciendis ab. Hic repudiandae numquam voluptatum minima. Adipisci dolorum eos quis nemo quaerat. Voluptate odio nam nesciunt dolorum unde amet perspiciatis quaerat nisi. Animi accusamus nemo odit illo perferendis aspernatur quam consequuntur. Laboriosam quam natus ad beatae dolores voluptatem at. Ratione laudantium earum nisi.

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