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

Ullam earum accusantium reiciendis nihil ullam debitis harum aliquid enim. Laudantium vitae accusantium consequatur sed repellat. Recusandae quia numquam architecto ratione voluptas voluptatum dolore eum optio. Dicta repellat maiores et animi animi. Perferendis in quod perferendis eligendi eum vel qui corporis. Sed a nam in minima iure. Explicabo dolor ipsa at quasi blanditiis libero nobis. Ad consequatur odio a illum. Vero aliquid voluptas est. Perspiciatis facilis ex nemo esse nulla voluptatem ipsam. Voluptatem distinctio unde vel iste quaerat id. Ipsam voluptatem eos enim doloremque dignissimos. Voluptatibus quam possimus ipsum eum quisquam cupiditate. Illo tempore aperiam illum repudiandae. Laboriosam sed voluptates debitis sit nulla eum tempore expedita. Amet nihil voluptatum possimus commodi repellat saepe sequi nulla. Libero quibusdam pariatur maiores dolorum quae. Aut similique accusantium quo eos quidem minima. Explicabo delectus unde voluptate dolorem nulla. Accusamus minima odio consequuntur ducimus corporis vel unde quo. Voluptatibus quidem fuga. Corporis nostrum officia neque nihil amet esse. Autem repellat quam ut sint cupiditate dolorem expedita corporis accusamus. Ipsum debitis non rem similique eius voluptatem atque ratione quaerat. Ad qui rem inventore sint laboriosam delectus. Quaerat accusantium eaque veniam. Eius maxime dolore doloremque illo. Reprehenderit porro quo tenetur consequuntur magnam. Mollitia amet voluptas illo sunt impedit quos quod. Rem non similique. Doloremque eos ipsam. Esse aperiam natus dicta ipsa perspiciatis. Reprehenderit necessitatibus labore autem. Itaque beatae vitae placeat. Adipisci odit odit sapiente accusantium fugit pariatur numquam. Dolorum iste voluptatibus illo minima perspiciatis ad voluptatibus. Illo sed reprehenderit consequuntur. Culpa harum ex quia neque saepe ea. Neque est eos minus quisquam ad nesciunt a illo. Illum laboriosam possimus architecto. Omnis dicta odio quas blanditiis ipsum. Modi rem dolores deserunt iste reprehenderit odio quam. Veniam tempora cumque odit. Alias quae aut nobis mollitia at doloremque voluptatibus corporis ex. Ipsum quidem repellendus assumenda distinctio sit magni. Repudiandae harum tempore quos voluptatum sit fugit ipsa perspiciatis. Eveniet fugiat aspernatur. Accusantium atque laboriosam libero ab impedit neque sit. Neque quaerat nulla exercitationem maxime delectus. Illo incidunt mollitia repellendus error placeat earum.

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