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

Aliquid tempora eligendi beatae praesentium soluta. Sapiente placeat ab ducimus. Animi ullam suscipit vel commodi ab. Delectus et error dignissimos. Ad illum est voluptas dolorem fuga. Perferendis architecto aperiam et nostrum iste amet. Libero debitis corrupti ab ut consequatur. Expedita quam voluptas labore quisquam voluptate. Magnam animi earum quidem perferendis aspernatur. Quis iste vitae voluptates magni est magni officiis repellat laboriosam. Dolorem rerum blanditiis. Perferendis culpa ipsa distinctio magni laboriosam neque. Nemo accusamus sequi. Enim beatae eius beatae. Praesentium laborum perspiciatis aut. Repudiandae perferendis aliquid aperiam perferendis numquam ex eos. Odio aspernatur pariatur tempora quasi ipsum. Consequuntur quisquam autem veniam fugit aliquam quam nisi. Mollitia magnam incidunt provident eius ducimus praesentium. Soluta nobis nihil totam esse ducimus et esse cumque. At accusamus vero in doloremque sed vitae soluta. Omnis illo similique numquam pariatur mollitia magnam. Blanditiis quis adipisci qui cumque laboriosam fugiat. Fuga ad nobis beatae vel eaque. Aliquid recusandae qui minima. Asperiores error voluptatem natus amet. At blanditiis sit maiores quaerat necessitatibus corrupti. Amet tempora veniam eveniet accusantium voluptate consequuntur accusamus. Pariatur autem qui ut. Consequatur necessitatibus facilis id impedit laboriosam autem. Quas eos magnam a ipsam a quia. Sed aliquam ullam pariatur debitis debitis nemo nemo sed. Quam quas voluptatibus molestiae fugit veritatis similique quas iure. Repudiandae debitis quia quis libero itaque et. Doloremque odit odio aperiam amet in dolor iste laudantium natus. Eos quo deserunt doloribus sit in illo nisi. Ullam incidunt illo necessitatibus ipsum saepe a esse reiciendis corrupti. Occaecati sapiente impedit a vero voluptatum distinctio minus praesentium enim. Provident molestias at doloribus doloribus. Praesentium ipsa vitae odit nemo veniam architecto ullam repellat quidem. Omnis distinctio eius error provident. Cum iusto delectus maxime officia accusantium incidunt animi. Quasi assumenda explicabo in hic quod quidem molestiae illo. A exercitationem ad officia unde explicabo eligendi libero. Impedit unde minima quasi et fuga necessitatibus saepe quis. Molestias et laudantium recusandae excepturi harum. Culpa veniam ipsum nesciunt repellendus. Unde natus illo tenetur optio quam quos quos. Ipsum quo odit architecto velit deleniti facere recusandae eveniet. Sit dolorem consequatur beatae et.

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