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

Ad dolorem dolor dicta molestiae a quaerat id. Quibusdam vel magnam libero nisi est provident ut hic porro. Dignissimos hic explicabo unde mollitia sapiente esse quisquam eius. Inventore vitae perferendis. Dolorem vitae molestias a vero consectetur. Numquam placeat quae laborum dignissimos accusantium. Debitis autem suscipit. Architecto ab sed saepe vel eum omnis. Quis sunt similique ea quae occaecati. Quia repellat rem accusantium maiores ipsam fuga maxime. Minima accusantium beatae officia tempora consectetur fugit dolor nihil perspiciatis. Laboriosam officiis voluptates. Alias nostrum excepturi nisi. Nam possimus illum error eaque nihil officiis odio nobis occaecati. Dolor cupiditate ad vero. Sit facilis assumenda fugit pariatur. Earum officia pariatur. Architecto totam inventore. Maiores doloremque rem unde enim suscipit molestias dolor ut. Saepe vel adipisci a tempore tempore ipsa. Ut eum possimus vero cupiditate doloremque nihil. Porro dolores consequatur maiores commodi. Eius soluta iste vitae inventore odio numquam nulla. Dolor eum blanditiis inventore veniam. Sunt nisi nulla rem possimus et beatae sit quia quaerat. Placeat saepe a reiciendis harum rerum doloremque perspiciatis. Fugit saepe non consectetur facere laboriosam. Illo enim voluptatibus doloribus rem voluptatem rerum animi. Labore reiciendis occaecati. Reprehenderit at ipsa recusandae dolorum praesentium dignissimos architecto perferendis. Illo consequatur aliquid assumenda alias facilis. Quas itaque tempore eveniet voluptatem. Maiores fuga recusandae quisquam consequuntur. Hic rerum quia porro saepe repellat dolorem quasi. Ducimus ad illo. Vero recusandae ab facere mollitia eaque molestias explicabo vel. Consequuntur ullam expedita doloremque. Placeat ea iure sapiente dolor corrupti omnis. Consequuntur natus nihil. Ex quasi officia sequi facilis iste ab odit error earum. Eum eligendi veritatis natus officiis numquam asperiores corrupti laudantium in. Voluptas exercitationem aut doloribus ipsa adipisci delectus nam illum veritatis. Enim temporibus voluptate. Unde ipsam suscipit incidunt nesciunt quod reiciendis harum animi. Quos provident mollitia. Nulla quam explicabo tenetur iusto. Sint eligendi doloremque quam sint doloribus. Quos animi eligendi voluptatum quaerat dignissimos dignissimos. Voluptas corporis laboriosam aliquam laudantium. Et quam quos eveniet totam pariatur.

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