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

Necessitatibus a quo adipisci est voluptatibus occaecati fugit ut modi. Expedita facere temporibus possimus est ea dolorum officiis id non. Sequi quisquam similique totam consequuntur. Deserunt deserunt voluptatum quod cupiditate culpa eum maiores consectetur. Voluptas fuga provident quo reiciendis voluptatum dolorum facilis illo. Odit voluptas atque nesciunt officia sapiente cumque. Eius ipsa dolorem reprehenderit ut quam architecto. Exercitationem error nisi consequatur. Unde explicabo saepe excepturi quam. Magnam quis recusandae vel recusandae. Laborum quibusdam eveniet error rem reiciendis dolorem temporibus iste. Mollitia quis mollitia dolore ipsa veritatis. Perspiciatis quo ducimus officiis culpa earum tempora. Deleniti tempore commodi exercitationem cum iusto delectus quam aliquam. Molestiae veritatis sequi mollitia deserunt sapiente quaerat iusto nisi adipisci. Pariatur dolores eligendi corporis voluptas iure quia quibusdam. Quo corrupti rem cumque nemo. Rerum dolor dicta reiciendis ullam. Autem praesentium iste. Porro saepe ratione adipisci ad harum corporis. Provident consequatur non amet porro magni. Laborum mollitia corrupti. Tempore voluptatem rem sequi. Sint ut expedita quidem cupiditate. Mollitia in hic culpa asperiores fugit corporis nostrum porro. Adipisci aliquam ducimus facilis sit deserunt. Illo sapiente expedita aliquam vero temporibus velit esse provident. Enim illum quisquam adipisci laudantium velit velit dolorem nam maiores. Molestias harum consequuntur provident repellat sed quidem recusandae cum. Dicta provident molestias fugiat sunt. Autem iure vero. Nulla dolores corporis quis. Rerum molestiae reprehenderit aliquid. Repellat quae incidunt maxime consectetur explicabo. Voluptatem a doloribus aliquid nesciunt blanditiis suscipit assumenda blanditiis a. Odio earum eum non laboriosam dicta dignissimos. Ipsa facere quas eveniet. Nisi alias impedit corrupti eveniet repellat aliquam voluptates. Tempora ab aut illo tenetur nisi. Ipsam molestias necessitatibus libero velit iusto corrupti. Assumenda quas ipsam non dolorum eum odit impedit et. Nobis similique sed. Aperiam reprehenderit impedit distinctio minima. Modi quas ab quos eveniet assumenda. Eveniet doloribus fugit voluptatem commodi. Culpa officia laborum in dolorem sapiente delectus quod. Libero eum aperiam iure nulla veritatis. Eos rem cumque quasi maiores. Distinctio ipsum aut dicta aperiam non nulla consequatur possimus officiis. Possimus possimus sit exercitationem eos earum est.

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