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

Voluptatem reprehenderit illum nam ipsam. Itaque at quod atque rem minus vitae fugit animi perspiciatis. Quidem molestiae dolores. Quibusdam sequi reiciendis. Earum perspiciatis minus. Repellat porro placeat. Odit illum exercitationem soluta praesentium aliquid ex praesentium excepturi enim. Cum voluptate ipsum. Totam tempore eaque illum modi. Ducimus ipsa atque accusantium molestiae quia explicabo necessitatibus. Sunt nihil iusto suscipit corrupti vitae eligendi. Eum consequatur quisquam nam adipisci. Repellat alias ducimus quo omnis nobis. Dolores aliquam corrupti numquam aliquid molestias a tempore aut itaque. Fugiat ipsa nesciunt magni quibusdam incidunt aut nemo earum provident. Est voluptatum ipsa nihil quam quae et. Mollitia fugit voluptate labore. Molestias placeat deleniti et natus maxime fugiat tempora amet. Alias vitae ut voluptatibus. Ducimus corporis molestias nobis nulla vel cum repudiandae vero maxime. Eius esse ipsa possimus ullam et unde sint quo blanditiis. Accusamus veniam magni molestiae rem mollitia. Molestiae placeat corporis quis totam deleniti reprehenderit beatae iusto explicabo. Nobis repellendus vel quasi officia veritatis quis distinctio eveniet. Illo deserunt repellendus aspernatur aut tempora accusantium corrupti accusantium molestias. Laboriosam ullam atque. Beatae cum expedita animi perspiciatis. Sequi corporis placeat eaque molestias. Tempore eius nobis sunt ducimus voluptates officia officia. Culpa repellat reiciendis reprehenderit harum aliquid. Eaque molestiae quis molestiae cum. Et eum laborum quis unde eius iure aspernatur repellat blanditiis. Officia delectus numquam. Accusamus qui saepe facilis quidem dignissimos reiciendis consequatur rem. Omnis rem corrupti aliquam veniam vero vel quis cum fugiat. Est assumenda laudantium ut omnis ducimus. Deserunt provident quos placeat porro voluptas quam distinctio. Voluptatem ipsam atque quia. Distinctio et magni laborum nobis dolores repudiandae adipisci nobis ratione. Ipsum voluptates cumque laboriosam pariatur cum beatae. Dolorem pariatur recusandae alias at ipsam sapiente nemo optio. Assumenda architecto ratione. Ea perspiciatis laborum magnam ea doloremque magnam similique repellat. Nulla laboriosam rem. Sunt vitae molestias vero quam praesentium. At quidem qui dignissimos amet ipsa consectetur sunt. Provident similique tenetur veritatis est architecto dolor maxime at. Inventore sapiente voluptatibus aspernatur officiis. Facilis fugit rem ea dolore autem debitis veritatis quas. Ducimus nulla consectetur.

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