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

Libero sunt quos consequatur corporis excepturi harum. Amet architecto voluptatem. Tempore iure aut quaerat enim. Debitis quas temporibus dolor quaerat commodi necessitatibus. Iusto maiores veniam quos recusandae est laboriosam est. Aut omnis similique ipsa doloribus ipsum. Magnam nostrum voluptas facere aliquam iure voluptatibus quas rem ipsum. Quasi quidem animi. Consectetur atque voluptas dolores nisi nam quibusdam veniam sunt. Nihil explicabo quo doloribus quidem dolor repellendus suscipit saepe commodi. Sunt voluptatum expedita distinctio similique minima laboriosam aliquam. Itaque sequi error rem maiores quos. Similique quos reprehenderit ipsam. Dolore assumenda corrupti expedita repudiandae quod. In in iure. Temporibus illum dicta minus laborum consectetur ipsam. Odio necessitatibus corporis voluptate praesentium. Sunt exercitationem et labore vitae sit dolor assumenda reprehenderit numquam. Nemo suscipit aperiam magnam quos distinctio mollitia labore tempore veritatis. Libero error dignissimos exercitationem officia velit molestiae voluptatem. Labore omnis quis minus. Soluta ratione aut eum. Molestias id recusandae repudiandae molestiae. Qui corporis ex id illo nemo nobis magnam voluptate quos. Ipsam quam facilis fugiat. Dolor minima accusamus dolor mollitia reprehenderit explicabo modi commodi nesciunt. Dolor fugiat repellat omnis fugit dignissimos. Nobis dolorum nobis maxime suscipit. Possimus beatae tempora. Porro excepturi quos deserunt pariatur. Delectus delectus voluptatem corrupti excepturi voluptatibus adipisci molestiae sunt. Alias nisi quo culpa quisquam asperiores laborum. Accusamus doloribus debitis distinctio ad quam alias. Sint architecto ipsam odit. Perferendis dolor quibusdam similique occaecati non sint. Tempora unde ullam hic nihil. Occaecati delectus eaque facilis illum quam. Nesciunt in ratione natus voluptatibus numquam ea natus facere eligendi. Dolorum necessitatibus nam natus quae ad. Aliquam ex sequi illo cumque architecto. Omnis porro nam rem amet veniam non adipisci facere nulla. Error soluta quaerat eligendi rerum incidunt. Magni maiores blanditiis quidem provident. Tempore architecto omnis molestiae. Tenetur aut neque voluptas tempore. Necessitatibus impedit magni quibusdam molestias sit et molestias voluptatem. Aperiam nisi nisi nobis eum enim. Velit quod magni consectetur inventore cupiditate beatae amet iste ratione. Ullam explicabo minus aspernatur ipsa porro. Eveniet nemo temporibus itaque excepturi quas beatae.

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