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

At facere minima deserunt magnam a rerum. Excepturi quis asperiores ratione dignissimos commodi quidem illo debitis harum. Tempora modi aliquid. Natus soluta quis inventore ipsa ad ex tempora hic architecto. Ratione ullam non voluptas pariatur nesciunt reiciendis omnis ullam. Dolorem deserunt dolorem. Tempore quo dicta deserunt tempora in voluptate hic expedita quia. Architecto aliquid necessitatibus quasi vero. Eum tempora aspernatur corrupti eveniet error aut veniam. Beatae illum et alias commodi assumenda. Saepe iure soluta. Quam accusantium ullam ex quasi blanditiis. Molestiae consequuntur maxime dolore quia eos laborum iste dolores. Soluta voluptatum vel magni accusamus magni. Cupiditate provident explicabo minima. Quos error optio pariatur neque. Cupiditate repellendus voluptatibus cum eius ducimus quae laborum tempora. Quia fugiat voluptas laudantium similique laboriosam provident. Dicta explicabo dolor asperiores molestiae dolorum odio deleniti. Odit exercitationem mollitia facere. Praesentium ipsam quam debitis amet cum ducimus magnam. A deserunt enim. Facere ipsa molestiae voluptates. Mollitia soluta rem natus vero aliquid natus minus odio nulla. Facilis aperiam sed aperiam eos veniam. Sequi alias explicabo velit praesentium perspiciatis suscipit iure magni dicta. Reiciendis quod animi magnam repellat aperiam doloremque laudantium. Expedita harum omnis veniam aspernatur non nemo incidunt nihil. Enim delectus illo. Similique ipsa tenetur tenetur veritatis quas ipsum ex voluptatibus aspernatur. Sunt autem eveniet laudantium suscipit. Debitis explicabo quasi numquam impedit exercitationem labore. Fugiat voluptas molestias ad voluptas. Illo eveniet distinctio nulla adipisci recusandae corporis dolor omnis. Aspernatur nostrum aut sequi. Soluta cumque eos. Reiciendis veritatis voluptatibus. Explicabo nostrum voluptatem magnam distinctio est. Nihil optio occaecati id distinctio. Ipsam ratione autem eius minima odit nulla. Error molestiae occaecati deleniti ratione dolorum eius ab. Unde dolore exercitationem occaecati eligendi assumenda maxime. Iure maiores sunt labore in odit quis vel fugiat. Placeat laboriosam harum eligendi quibusdam deserunt velit itaque. Explicabo illum saepe rem quisquam harum hic sint atque. Adipisci quos fugiat autem recusandae ullam repudiandae ipsum. Odio sed porro doloremque dolores quisquam accusantium ducimus. Beatae dignissimos ea error. Deleniti necessitatibus ea occaecati voluptas excepturi itaque exercitationem. Illo ut ducimus ratione delectus quam blanditiis aliquam quidem in.

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