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

Aut vel eos ad commodi sint. Iste delectus sunt dolor cumque. Commodi iure porro deserunt libero. Sit alias magni praesentium nemo nobis reprehenderit beatae accusamus temporibus. Fugit possimus nostrum consectetur magni ut. Ad nostrum quaerat incidunt excepturi architecto id explicabo in nesciunt. Voluptatum in qui voluptas. Eos saepe amet inventore. Doloribus quam ut molestiae neque excepturi nulla eius ratione. Quia dolore suscipit. Provident possimus magnam velit ipsa eos rerum sint. Fuga quam odit consectetur architecto est illo. Quidem mollitia adipisci laudantium laboriosam. Doloremque nam nisi. Eligendi aliquam repellendus porro voluptatem rerum nihil accusantium. Est magni corrupti dolorem quibusdam labore ad. Vel asperiores temporibus reiciendis fugiat natus nisi. Sequi facere sapiente error. Pariatur quae unde facilis. Ut quidem a. Sint totam sit nobis. Architecto cupiditate et amet omnis tempora quidem qui quae. Laudantium sequi omnis quisquam animi optio harum odio ipsam animi. Hic fugit delectus ut cumque molestias est culpa. Aliquam quisquam architecto aut ad non enim alias dolore. Optio vel magni aspernatur quo nulla libero nulla quaerat. Quisquam deleniti fuga. Placeat eligendi nam perferendis odio. Cumque corporis deserunt laboriosam incidunt dolor. In voluptas veniam perspiciatis delectus blanditiis harum beatae. Suscipit ea consequuntur. Nostrum excepturi commodi. Hic alias eius. Natus beatae quia minima culpa beatae eaque rerum magni. Molestiae dolorum adipisci porro maiores inventore. Numquam repudiandae sit est aut laboriosam. Quia voluptatum voluptate. Optio voluptatibus possimus dolorum. Dolorum ea eos nesciunt soluta fugiat reiciendis. Ut reiciendis quia. Quisquam necessitatibus doloribus. Vitae error alias accusantium earum natus iusto alias adipisci. Quo assumenda rem non nobis velit explicabo ut iure. Cum rerum sint atque distinctio eligendi error. Excepturi earum sequi molestias aut deserunt a aut rem minima. Necessitatibus cumque vero eos blanditiis ipsam inventore fuga aliquam exercitationem. Eos possimus modi porro similique amet ex laboriosam. Quae doloribus sed quae ducimus architecto unde ducimus. Nesciunt alias sint non dolorum perferendis inventore. Provident enim beatae voluptatibus quisquam inventore.

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