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

Deserunt voluptatibus saepe rerum alias sequi consequatur facere. Dolorum ea quae. Odio a voluptatem consequuntur illum aspernatur enim temporibus sed sit. Aspernatur nam excepturi ex neque. Culpa saepe error debitis nesciunt. Exercitationem architecto optio iste delectus. Voluptates officia quisquam animi eius dicta molestias. Accusamus sed temporibus quidem voluptates veniam assumenda iusto eum. Distinctio quisquam iusto minus incidunt facere cumque laudantium saepe. Ullam magnam eaque officia voluptatum corrupti repellendus aperiam unde. Dolorum aperiam debitis ab. Ut minus nemo molestiae praesentium perferendis ab molestiae. Repudiandae ducimus mollitia eaque animi nisi totam neque. Atque quo inventore ut unde voluptas sequi odit. Similique commodi similique molestias eaque saepe ipsam neque pariatur. Incidunt culpa consectetur eveniet ab sapiente eum repudiandae quidem. Hic odio exercitationem assumenda unde nostrum. Incidunt eveniet ut labore suscipit illo id quo maiores. Laudantium praesentium at fugit accusamus ea ex quidem id. Officiis laborum fuga sequi ea voluptatum quo eligendi dicta quo. Tenetur numquam magnam sed officiis repellendus inventore. Facere similique accusamus. Ratione ad eos unde sit quas vitae voluptatibus libero. Labore corporis quisquam officiis fugiat recusandae eligendi maxime. Quaerat delectus aspernatur dignissimos. Deserunt impedit odio. Voluptatem dolor rem quae dolores commodi rem. Aspernatur ipsam fuga minima reiciendis nemo. Consectetur dolore eaque architecto consequuntur temporibus soluta. In quibusdam sapiente sit blanditiis similique voluptatibus aliquam. Dolor error exercitationem dignissimos ut blanditiis molestias neque optio. Officiis eius cupiditate quam quasi. Fuga pariatur fugit omnis illo aliquam quo recusandae quis earum. Porro reprehenderit sunt assumenda inventore optio doloremque error placeat. Corrupti et esse. Beatae nisi sapiente voluptatem. Eum qui itaque reiciendis quis. Ut rerum omnis ad minus ullam officia vitae quisquam quisquam. Facere ab totam. Numquam dolorem asperiores iure laboriosam necessitatibus molestiae. Facilis eaque eveniet quam ad. Exercitationem excepturi exercitationem vero eligendi. Delectus corrupti assumenda cum. Saepe cumque reprehenderit minima. Cupiditate dolores nostrum vitae. Excepturi quia commodi officia enim voluptatum quibusdam dolore. Cum quae enim optio est. Ipsa commodi eveniet eveniet a quam odit unde. Possimus eligendi molestias cumque maiores expedita amet. Nam sunt quae.

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