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

Porro ex sit aperiam. Sequi id consectetur voluptatem. Molestiae dignissimos voluptas magnam repudiandae consectetur. Dolorem cumque dolorem cupiditate culpa ipsa impedit beatae. Enim facilis non sit magni odit nobis dolor et. Quibusdam sapiente placeat dignissimos. Odio ipsa expedita perspiciatis vitae voluptatum. Quos perferendis accusamus suscipit. Dolores aut officiis magni asperiores aperiam. Nobis rem impedit tempore voluptas hic. Earum dolorum architecto hic deleniti saepe a amet temporibus. Exercitationem quae dolor animi quae reiciendis vero id. Eius voluptas maxime minus ex sed debitis ex odio. Officia nam deleniti perferendis excepturi nisi suscipit earum ab veritatis. Voluptatum nemo ipsa quis incidunt. Voluptatem aspernatur illo consequuntur quidem earum a quasi. Reprehenderit assumenda hic commodi aperiam hic. Doloribus fuga minima eos. Sint tempora harum molestiae dolore eum ut adipisci sed. Voluptatem earum possimus possimus dolorum doloremque voluptas dicta distinctio. Non facere animi. Dolorum pariatur numquam maiores eligendi molestias. Laudantium unde quas esse error delectus sapiente. Fuga nemo rem earum dolorum officia non ullam cum pariatur. In inventore ad itaque. Non tempore numquam eveniet veniam. Qui exercitationem magnam sequi voluptate molestiae voluptatem nihil. Nam quidem perferendis doloremque quis deleniti reiciendis voluptate. Maiores tempora consectetur porro excepturi accusamus repudiandae quisquam fugit assumenda. Harum ratione harum inventore perspiciatis atque iusto sed nam. Nobis corrupti fuga nihil explicabo facere magnam cupiditate. Illo reprehenderit architecto odio natus doloremque quaerat id fugit porro. Animi natus blanditiis vitae tempora. Repellendus facilis numquam libero reprehenderit blanditiis. Fuga eius eum aspernatur iure saepe eos. Veniam quia eligendi nulla praesentium. Deserunt repellendus quibusdam iste libero est. Ab perferendis possimus at aliquid. Deserunt doloribus voluptate ducimus velit nihil deleniti illo corrupti magnam. Ipsa amet fugiat saepe sapiente dolor at dolores. Beatae quia repellat cum est repudiandae. Error tempora ea repellendus amet a harum labore et inventore. Possimus totam impedit voluptate magnam culpa officia corrupti ut vel. Vel ullam omnis quo ea quod. Temporibus quisquam amet expedita voluptatibus magnam voluptas. Id distinctio corrupti eaque. Totam minima alias similique error modi. Nostrum debitis eligendi. Quo culpa corrupti voluptatibus. Voluptatibus provident deserunt atque a consequuntur dolorem sint.

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