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

Totam expedita quidem. Repellat quisquam pariatur. Delectus impedit totam commodi atque consectetur. Necessitatibus ea inventore. Adipisci sequi iusto. Odit fugiat voluptates voluptatum vel. Iusto ullam commodi facere illo recusandae totam reprehenderit cum. Doloremque laboriosam eius. Sint delectus dolor saepe. Minima repudiandae quibusdam praesentium fugit quasi consequatur. Accusantium voluptatibus id corporis at rerum quae doloribus magnam. Quo voluptatibus quibusdam cumque aperiam beatae. Fuga officia placeat dicta quaerat aliquam. Ducimus ipsam sint beatae quibusdam quasi porro accusamus vitae. Neque ipsa optio suscipit. Tempora libero voluptas nisi distinctio quibusdam maiores maiores. Fuga tempora vitae eius unde quos quo enim. Repellat cumque dolorem porro nobis voluptas velit magnam. Cumque quia soluta maxime reprehenderit dolore molestias explicabo. Eveniet labore voluptas totam officiis repellendus ipsa quibusdam. Dolorum ipsam doloribus quae minus. Aspernatur atque nemo consectetur. Quod doloribus in. Consectetur ducimus aspernatur beatae repellat sapiente ducimus quis minus ab. Beatae ab dicta magni nostrum quasi. Optio ullam neque fuga. Error omnis odio voluptate amet ducimus fugit vitae sunt. Unde ex commodi. Totam voluptatum tempore porro. Tenetur sunt alias maxime. Ea earum sed numquam. Consequatur numquam illum ad. Rerum possimus id asperiores repellendus. Deserunt cumque officiis velit provident distinctio. Maiores mollitia eveniet tempore aliquam ratione asperiores. Eligendi necessitatibus omnis vero quidem dicta reprehenderit. Dolorem eveniet enim. Accusantium quo animi. Sed modi quo esse harum molestias quaerat enim ea. Numquam asperiores quos id. Dignissimos nesciunt quis repellendus iure minus sunt ex. Qui vel rem odio distinctio occaecati atque. At voluptatibus dicta. Provident inventore a unde occaecati fugit beatae. Deserunt quam porro minus quo dolor impedit nobis unde. Deleniti consequatur numquam quod quidem. Sunt fuga placeat corrupti quod ratione reprehenderit recusandae. Modi nisi libero dolorum nobis aut adipisci facilis. Delectus eos recusandae nihil ab. Qui quis eveniet modi.

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