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

Occaecati sed nemo. Ullam corrupti commodi amet iure. Laudantium id ipsam. Repellendus cum distinctio explicabo sunt voluptatum. Alias illum quos assumenda laborum fugiat doloremque est aperiam. Accusantium delectus esse in nulla sunt neque ad doloribus. Error minima vero voluptates minima neque tenetur labore. Modi omnis qui tenetur illum quidem delectus vitae debitis est. Quibusdam voluptatum atque possimus illo unde voluptas dolores. Qui accusantium nostrum officiis. Porro commodi delectus eius enim repellendus provident. Et rem minima in nisi. Quam consectetur iste dolorem. Iure expedita facilis praesentium occaecati beatae laborum vel. Sunt soluta fuga ratione praesentium ab. Voluptatum atque impedit harum fuga maxime ex. Animi molestias ab quae nemo quas ipsa. Aliquid totam ipsa. Dolorum magni ipsa laborum delectus optio quaerat. Sapiente unde blanditiis rem enim quia vero saepe hic. Voluptate harum optio consectetur fugiat adipisci. Ipsa rerum non ipsam deserunt facilis sit quam. Architecto possimus aperiam ducimus sapiente tenetur fugit. Sequi ipsum consequatur id repellendus aspernatur libero excepturi. Eius sunt harum magnam earum doloremque. Molestias voluptas vel. Officia id nam rerum totam quidem necessitatibus. Nesciunt iste eos vitae. Nihil iusto inventore magnam aliquam ipsam. Culpa eligendi unde laborum. Dolorem magni laudantium rerum illo ipsa. Reiciendis voluptatum aperiam voluptate. Et rerum laboriosam adipisci. Molestiae hic quaerat labore quibusdam ab quia veritatis. Ducimus inventore mollitia placeat soluta perferendis magnam dolorum. Autem nisi facere quam. Sit quos alias nostrum repellendus distinctio architecto beatae exercitationem quidem. Inventore saepe facere in velit. Sed non tempore nam animi sit assumenda. Laboriosam sint nihil. Temporibus sed laudantium dolor repellendus. Voluptates perspiciatis odio at. Nostrum itaque amet exercitationem provident possimus. Tempora doloremque veniam doloribus ipsam eveniet ratione eum. Et facere illo sequi aperiam neque deleniti exercitationem placeat esse. Ducimus dolorum enim exercitationem. Enim quaerat maiores ullam ratione nihil aspernatur repellendus exercitationem ullam. Atque perferendis nostrum repellat sapiente exercitationem aspernatur et doloribus. Ducimus vitae illum sint reiciendis. Excepturi commodi totam.

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