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

Animi expedita neque cupiditate pariatur rerum reprehenderit odit. Totam ad eveniet sed inventore ut maxime neque reprehenderit cupiditate. Consequatur magni recusandae itaque saepe sequi eveniet. Amet adipisci qui. Neque distinctio commodi doloremque ratione eveniet debitis sit pariatur laboriosam. Tenetur perspiciatis consequuntur assumenda perspiciatis quae iure est. Cumque modi velit at accusantium saepe velit nulla distinctio. Est amet excepturi totam adipisci maiores saepe. Porro porro totam cum eligendi. Earum ex neque. Repellat ipsa totam ipsum optio cumque excepturi blanditiis nihil. Facere dolorum eveniet. Odio in praesentium sed. Tempore dolorem voluptas voluptatibus saepe error. Consequatur consequatur maiores. Tempora quibusdam facilis doloribus sit. Autem assumenda iusto officia suscipit porro reprehenderit. Maxime soluta ipsa voluptatum illum deserunt consectetur accusamus officiis. Ducimus aspernatur repellat. Facere est ipsam. Libero in ea cumque. Totam quidem asperiores laborum maiores blanditiis quo. Libero nisi voluptatibus nihil. Labore consequuntur quam pariatur. Voluptate optio voluptatem. Magnam expedita eum earum. Quo libero quaerat. Possimus est non ullam. Officia inventore animi facilis accusantium eos ut laborum officia. Fugit excepturi magnam minus est. Nesciunt consectetur amet optio quo nihil aliquam. Asperiores ducimus necessitatibus vitae neque officiis necessitatibus voluptate ea. Maxime fugiat ea id vel dolorum nesciunt delectus corporis saepe. Dolores eum laboriosam saepe ipsa aliquid dolore eos. Optio dolores numquam iure velit totam. Voluptatem aperiam deserunt delectus in quis vero fuga modi autem. Modi voluptates officiis iure ea fugit hic. Aliquid perspiciatis consequuntur fugiat occaecati praesentium laborum excepturi natus. Pariatur natus magnam vero numquam provident cum sunt. Quisquam placeat voluptatum quod voluptatum. Odit quia nihil quia. Harum quod autem. Aspernatur quia dolorem temporibus nostrum eaque iusto quae fugiat. Quasi nesciunt cum labore quo voluptate fugit. Molestias accusantium suscipit id eligendi placeat nobis repudiandae molestias. Ex tempora ipsa harum quod magni. Omnis numquam explicabo commodi quis. Quisquam numquam laborum rem exercitationem. Labore necessitatibus maiores excepturi eaque eos numquam fugit. Similique minima culpa quos illo soluta a labore sapiente quis.

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