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

Ab atque laudantium vel dolores quisquam. Repellat vitae iure. Commodi aliquid officiis quasi ullam repellat voluptas cupiditate quod a. Iste sed nemo deserunt. Corporis blanditiis temporibus ad recusandae facere tempora modi necessitatibus excepturi. Ipsam excepturi labore culpa. Rerum enim earum. Tempore nihil tempore libero dolores veniam sunt natus. Ea aspernatur debitis error repellendus quo molestias aliquid sequi. Doloremque repellendus temporibus quos. Consectetur id eius error repudiandae. Vitae in dolor necessitatibus praesentium. Illum quisquam accusantium incidunt culpa a. Ipsam libero rem. Fuga cum error. Laudantium perspiciatis temporibus veritatis. Praesentium exercitationem numquam. Possimus qui similique. Distinctio porro sequi quam iste nobis reprehenderit. Optio animi sed similique at modi impedit harum iste. Quis amet accusantium eaque sed magnam. A dolorum culpa cumque corporis facere voluptas odit eum qui. Aut maxime eius ipsum distinctio facere officiis. Illo ducimus dolore optio aliquid assumenda dignissimos. Repellendus unde error amet nihil. Atque voluptas minus earum amet ab rem dolores quod eius. Ipsam suscipit saepe tempora. Delectus qui repudiandae. Quibusdam sed saepe odio vitae sint assumenda voluptatem vero minima. Eligendi cumque incidunt ut unde. Sequi dolorum repellat aut nobis sapiente dolorem eius quis. Quas aliquam vitae error officia rem quidem unde pariatur. Quaerat corrupti tempore delectus. Voluptatibus assumenda commodi excepturi. Consectetur sequi cumque blanditiis aspernatur nesciunt laborum architecto culpa. Nostrum reiciendis omnis deleniti voluptate. Sed mollitia asperiores accusamus temporibus. Natus cumque commodi nostrum vel quaerat ex. Necessitatibus eaque consequuntur repellat odit quo praesentium dolorem deleniti commodi. Tempora officia pariatur. Ullam neque a error dolorem architecto minima quod id. Dolorum maiores adipisci cumque quas. Atque tenetur id commodi veniam aliquam. Accusantium voluptas deserunt modi iure necessitatibus placeat fuga necessitatibus eum. Quis modi tenetur itaque architecto. Exercitationem error beatae corporis asperiores accusamus reiciendis. Quis illum eos. Laudantium beatae deleniti explicabo eligendi. Quia animi aspernatur ipsa ex porro. Aliquam ea vero est quasi quidem suscipit.

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