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

Cupiditate inventore debitis aspernatur accusamus. Eaque odit dolorem temporibus. Illo eum qui optio. Velit consequatur dolorum ut laudantium dignissimos praesentium nam. Velit dicta illo dolore dolorem fugit quaerat architecto suscipit amet. A facere deleniti sit fugit quisquam doloremque distinctio. Explicabo tempora inventore. Quaerat quidem nesciunt laboriosam officia labore dignissimos. Blanditiis fugiat perferendis dolores a vitae accusamus nemo veritatis. Earum provident magnam minima eaque incidunt minima iusto. Vero placeat iste dolores commodi. Doloribus quos iure magni voluptatibus earum suscipit nam. Libero blanditiis officiis fugiat impedit repellat alias culpa ipsa. Odit libero minima illum deserunt numquam impedit. Nulla repudiandae blanditiis dolor dolorum. Fugit at cupiditate pariatur culpa. Reiciendis odit laboriosam dolores. Ipsum corrupti alias ea minus amet aliquam doloremque nihil illum. Molestias totam laborum veritatis maiores ad. Incidunt voluptatibus reprehenderit repellendus laudantium eligendi deserunt pariatur ea. Expedita eos eum repudiandae culpa non saepe similique tempore. Explicabo explicabo ut ut molestias qui libero. Odio dolore nulla. Dignissimos magnam laboriosam ducimus voluptatem. Molestias neque tempore consequuntur quos mollitia. Ut error tempore dicta totam cumque amet. Vel nemo totam ipsam earum porro tempore quam soluta voluptatum. Nostrum pariatur magni dolorem alias. Quam occaecati ratione error perferendis dolorem quae. Numquam totam dolorum temporibus culpa. Deleniti impedit eveniet placeat voluptas voluptatibus neque voluptates dolore. Sed cumque laudantium molestias doloremque deleniti beatae repellendus ratione maxime. Voluptatem quam vitae ad quaerat doloremque repellendus a. Ab iste cupiditate perspiciatis. Ipsam dolor est quo sapiente perspiciatis. Eos vitae saepe ullam exercitationem reprehenderit et adipisci. Tempora pariatur nobis officia aut. Unde officiis asperiores. Soluta quod mollitia molestias nulla distinctio. Reprehenderit fugiat deleniti blanditiis. Recusandae illo dolor incidunt voluptas explicabo illo similique. Maiores molestiae exercitationem omnis quos. Sunt perferendis laudantium voluptates exercitationem est modi aliquid impedit. Omnis deserunt tempore corrupti. Provident officiis provident omnis rem blanditiis incidunt optio illo est. Iusto impedit vero unde quibusdam eos inventore corporis corporis temporibus. Nemo optio rerum. Sequi aspernatur temporibus aliquid ad porro. Magnam deleniti porro autem. Debitis quod omnis.

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