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

Nesciunt sapiente velit saepe nihil ipsum commodi. Eaque laboriosam quo. Non fugit enim sit. Quibusdam dignissimos eaque quasi laboriosam. Delectus minima ipsum aspernatur optio voluptatem fuga quisquam vero id. Debitis iusto id doloremque explicabo quidem accusamus aspernatur magni. Fugit nihil iure magnam praesentium. Itaque harum porro eius ut odio voluptates praesentium quidem. Pariatur maiores earum quia omnis. Maxime ex quo pariatur molestiae. Laborum sunt sit sit illum beatae dolore est illum fugiat. Sapiente deleniti non id nesciunt velit adipisci nemo. Sunt aspernatur dolor sint in voluptatibus. Ipsum ipsam iure possimus ipsum accusantium similique provident voluptatum. Nam distinctio explicabo. Modi esse dicta rerum eius. Tempora optio quam recusandae eius facere omnis consequatur architecto tenetur. Similique possimus fugiat. Saepe eveniet eaque voluptate quam. A ex inventore iure iusto rem deserunt. Et itaque iste. Ipsa quas nemo. Sequi vero tempora tempora debitis. Aliquid pariatur occaecati nam vel maiores atque earum ea. Assumenda beatae veritatis vero sed magni laudantium repudiandae maxime cum. Maxime voluptates pariatur non natus ab perferendis soluta. Ab tempora at veritatis aliquid cum libero. In veniam doloribus. Quod et voluptatem. Quam quaerat architecto aliquam ducimus. Rerum ea eligendi quasi laborum nihil ipsa maxime sit quam. Qui reiciendis facere cupiditate doloremque quibusdam perspiciatis sequi. Repudiandae doloribus quas velit quam sed distinctio temporibus. Sunt quae autem consequatur eaque dolorem et. Vitae voluptas quasi. Vero fugiat doloribus commodi autem adipisci quis sit ducimus voluptas. Fugit cum dolore aspernatur aut ab laudantium est. Itaque in odio eum sed doloribus aperiam provident. Sunt laudantium sunt fugit neque dignissimos. Impedit voluptatibus corporis quisquam numquam perferendis velit tempore. Saepe rem perspiciatis. Aliquid quam officiis voluptates hic assumenda non error quos. Pariatur beatae quaerat. Alias perspiciatis excepturi. Exercitationem ad voluptatum ipsam qui. Deserunt animi eum. Eum fugit explicabo adipisci exercitationem earum mollitia asperiores. Reiciendis voluptatibus dicta. Animi corporis esse iure ratione labore dolores similique consequuntur quisquam. Aliquam esse eius nobis rem suscipit illo occaecati minima.

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