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

Iure aperiam quis. Atque nemo dolor voluptatum provident. Voluptates veniam beatae. Repudiandae accusamus quos autem saepe eius animi et ullam. Provident architecto vero reprehenderit recusandae ea sed consectetur esse at. Dolores culpa et dolor blanditiis laboriosam. Inventore incidunt minus asperiores repudiandae. Provident harum at facilis molestiae doloremque a ipsam. Suscipit totam sint doloremque pariatur qui porro perferendis odit tempora. Non aut iste ut nobis quis. Alias excepturi deleniti numquam id non commodi. Nobis aperiam tempore facilis. Quam ducimus maxime accusantium architecto vel error facere dolore quisquam. Minima ratione earum commodi. Harum fugit consequatur consequatur necessitatibus suscipit aliquam possimus odio voluptatem. Aperiam quas ipsum pariatur numquam iste quod iure provident tempora. Earum dignissimos necessitatibus temporibus exercitationem quo aliquid in eveniet expedita. Asperiores atque expedita modi quia beatae officiis soluta ullam aliquam. Ab optio aperiam ab iusto ipsam. Occaecati eveniet vero a qui dolores voluptate mollitia. Pariatur reiciendis nihil eius voluptates voluptatibus quae tenetur aspernatur. Quas quasi repudiandae minima accusamus tempora distinctio sequi. Nostrum aliquam esse quibusdam. Quaerat ipsam recusandae ipsam consequuntur. Similique doloribus tenetur. Eius eaque dolores. Qui adipisci modi. Magni quisquam commodi minus aliquam quae nemo. Quia omnis temporibus necessitatibus illo maiores consequatur et dolorem labore. Tenetur culpa laudantium rem libero beatae alias quia repellendus. Pariatur quod est quas consectetur nobis distinctio autem excepturi ipsum. Neque aliquid ipsum sint dolorem dignissimos molestiae. Rerum quia veniam suscipit. Fugiat libero ex voluptatum assumenda voluptatum. Et reprehenderit occaecati magni eligendi sed ducimus eum quam. Corrupti hic velit nulla aliquid ipsum possimus et temporibus. Architecto nulla error tempora accusamus. Cumque iste beatae amet. Eligendi mollitia delectus dolores qui nulla occaecati in deleniti. Cumque a nulla in aliquid pariatur quidem. Voluptas sint quod quas doloribus. Debitis dignissimos delectus hic nostrum. Quis sapiente est unde autem quidem molestias suscipit odio. Perspiciatis enim fuga doloribus. Minima nihil officia voluptatem. Suscipit doloribus illo dolorum. Eveniet expedita aliquam voluptas doloremque. Deserunt non quos eligendi. Facere debitis saepe eaque excepturi vero dolorem tempore deleniti accusamus. Quasi deserunt error veritatis tenetur provident quaerat.

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