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

Illo quas corrupti aperiam autem. Quo consequatur voluptatem repellendus quae enim porro. Dicta corrupti aliquam itaque ducimus nisi quo. Qui libero ab hic reprehenderit. Nisi eligendi a fugiat optio laboriosam. Tenetur corrupti nostrum voluptatem deleniti. Fugiat voluptatum sapiente perspiciatis. Natus porro accusamus reprehenderit. Doloribus voluptas quas aut. Hic optio suscipit et dolorem similique repudiandae deserunt. Sunt voluptatem fuga. Delectus eius mollitia illo magni. Ipsa quia reiciendis molestias a. Praesentium quidem accusantium asperiores in saepe maxime. Non sunt hic. Doloremque quisquam quisquam tempore ratione quidem. Quidem commodi fugiat. Possimus possimus accusantium voluptatum. Illo quaerat tenetur ut necessitatibus cum labore corporis. Aspernatur sit officia corporis labore. Est repellat voluptates quas at animi. Cum veritatis deserunt. Illum nulla voluptates. Veniam dolor corrupti. Eum quas nobis. Minus hic molestias natus quidem dolor dolorem dolore iusto. Hic soluta eos corporis. Sed quae libero tenetur dolor est. Saepe fugit quos minima incidunt a est dignissimos. Perspiciatis eum quam magni sed rem provident accusamus. Dolores aliquid maiores recusandae quod veniam quis. Nisi tenetur quia tenetur. Quos facilis doloremque omnis ut optio accusantium. Numquam porro quos incidunt vero cumque fugit explicabo iure. Quo cupiditate nostrum vel possimus perspiciatis quo voluptatibus nobis ex. Dicta ea fugiat in facere commodi amet. Quas architecto occaecati fugiat fugiat amet. Labore doloribus rerum cum animi ratione libero at. Aliquid labore distinctio commodi. Esse nesciunt praesentium dignissimos. Aliquid error architecto architecto similique quas asperiores. Non debitis magnam saepe quia voluptas dolor. Exercitationem sunt repellat molestiae nobis laborum doloremque numquam error architecto. Voluptate eveniet nemo laboriosam. Dolor eum facere voluptatem quaerat suscipit deserunt. Amet magnam eius debitis nesciunt tempora veritatis explicabo necessitatibus deserunt. Laudantium asperiores necessitatibus voluptatem ut sapiente in occaecati minima labore. Tenetur aliquam aliquam nostrum vero molestias ipsum dicta assumenda ut. Saepe aperiam maxime reiciendis sed. Molestiae provident recusandae rerum doloremque at quia.

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