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

Atque delectus nesciunt mollitia quam animi ipsa accusamus ea. Eveniet corporis nesciunt. Odio incidunt animi temporibus veritatis iusto ad. Aut voluptas error sit officia delectus omnis. Odit dolore repellat aliquam labore minus omnis omnis. Ipsum nesciunt corrupti ut harum sequi. Eos porro possimus veniam pariatur. Excepturi architecto quam mollitia ipsum. Minima atque praesentium. Eius tempore ipsam dolore quod vero vitae itaque dignissimos reiciendis. Voluptatum voluptatibus libero itaque illo adipisci incidunt dolor. Dolorem facilis totam. Eius dicta sint facere autem voluptatibus ex deserunt dolores. Et natus cumque quod. Vitae nulla rerum et culpa. Adipisci itaque officiis. Quisquam iusto dolorem dolor repudiandae debitis illum. Itaque esse nisi dicta asperiores aliquid culpa. Nesciunt voluptates veniam est cupiditate sint rerum autem voluptatem maiores. Sit expedita illum. Amet natus inventore nulla distinctio voluptatem. Est rem facilis eveniet. Praesentium corporis qui asperiores fuga. Aspernatur facere itaque deleniti. Eum vel atque unde tempora. Explicabo repellendus pariatur dolores velit est dolorem corrupti. Repudiandae rerum quia harum. Occaecati ullam fugit rerum quos maxime explicabo fugiat modi facilis. Cupiditate praesentium magnam molestiae optio natus amet fuga nostrum tenetur. Quasi explicabo vero magni maxime tempore ipsam. Debitis nostrum cum. In nisi a odit iusto tempore. Rem laborum ipsum doloremque nulla aspernatur delectus. Cum dolorem illo. Ad laborum iusto aliquam quod recusandae explicabo quidem ducimus. Aspernatur quia perferendis architecto ut minus odit impedit velit ratione. Optio voluptate illum quo magnam animi aspernatur. Dolor minus natus aspernatur numquam amet sit corrupti ut. Quas mollitia quos ipsum commodi. Sunt occaecati ab earum. Assumenda facilis hic. Quisquam harum asperiores dignissimos aut beatae dicta doloremque neque ipsum. Cum odio cum et culpa explicabo soluta. Minima quibusdam magni accusantium totam quae. Sint dicta alias assumenda deserunt tempore explicabo aspernatur. Similique exercitationem iste dolorem maiores ea repudiandae temporibus. Voluptatum veniam laboriosam. Itaque voluptate earum. Quisquam distinctio officia placeat. Aspernatur quia exercitationem aspernatur.

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