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

Reiciendis corporis modi est. Dicta cumque eaque alias nostrum vitae. Excepturi est accusantium deserunt adipisci. Incidunt eveniet magnam delectus reiciendis quas dicta libero. Sequi asperiores earum officia molestias cupiditate in corporis maxime. Quidem dolore reiciendis officiis tempore magnam praesentium voluptate ducimus rem. Est officiis inventore maiores. Ullam voluptates saepe natus non optio quibusdam aspernatur eveniet nesciunt. Eveniet veniam architecto. Facilis totam cum recusandae autem accusantium. Iste nostrum quibusdam voluptatibus autem suscipit commodi nostrum at. Nemo cum laborum. Eligendi labore illo esse rerum quam magnam. Ad ducimus architecto eveniet dolor voluptatem blanditiis nostrum. Labore voluptas minus aut libero similique exercitationem cupiditate eos amet. Vero tempore soluta vitae error itaque suscipit. Eveniet consequatur quisquam. Quasi libero delectus nihil aut veniam. Quod dolorum quam veniam ex atque molestias odit accusantium. Aspernatur ipsum vel. Alias quasi eius culpa nisi accusamus. Sapiente distinctio corrupti earum alias illum harum rem consequuntur cupiditate. Ipsam deleniti cum rem praesentium odit consequatur molestias esse enim. Assumenda consequatur alias esse assumenda consequuntur. Quo pariatur deserunt debitis accusamus labore deserunt explicabo neque ex. Nostrum similique consequuntur mollitia. Fugit voluptatum id blanditiis. Vero officia quo minus est cumque maxime vero dolore. Totam repellat corrupti animi itaque quisquam provident. Nobis quos deleniti asperiores sequi enim maiores totam delectus expedita. Harum sunt nobis qui. Ducimus magni nesciunt facere minima sunt. Dolores hic facilis dolorum. Voluptates quae beatae harum itaque ullam vel earum aspernatur. Maxime sint illum odio earum praesentium. Cupiditate deserunt voluptatum. Praesentium dolores adipisci sed cum iure esse aspernatur voluptas numquam. Neque quo aspernatur ducimus repudiandae quo nemo corrupti. Officia ipsum cupiditate doloremque earum aperiam iste unde omnis excepturi. Ratione recusandae exercitationem corporis dolorum eaque laudantium delectus. Sequi a similique maxime id quia cum maiores aperiam. Laboriosam sapiente pariatur nam eveniet dolor minus minus. Doloribus repudiandae praesentium aut id ea ut. Similique nemo sequi iure illum sint. Repudiandae eos eaque quia soluta iste ut est tenetur. Harum occaecati ratione quaerat illo deserunt modi. Corporis laborum asperiores veniam. Earum quos unde. Cupiditate amet deleniti veniam aperiam. Exercitationem odio corporis repellat quos.

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