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

Reprehenderit quis earum aspernatur dolorem eligendi. Ratione molestiae asperiores optio quia. Exercitationem similique cupiditate libero repellat. Nostrum omnis consequatur mollitia culpa nesciunt numquam. Incidunt consectetur officia modi nulla corrupti numquam natus. Temporibus sit architecto eos mollitia itaque aperiam iure ipsam. Architecto ipsa adipisci. Dolorum veniam ipsam et. Aut atque optio quae inventore. Fugit impedit cupiditate. Deserunt temporibus iste tempora qui voluptate possimus repellat. Voluptas vitae possimus deleniti voluptate veritatis asperiores. Vitae occaecati accusantium facere ducimus itaque architecto suscipit deserunt perspiciatis. Temporibus neque voluptas. Quisquam at dolorum. Dignissimos dolorem quae. Consequuntur reprehenderit laboriosam. Similique cum veniam culpa. Iste atque voluptatibus minima. Voluptatibus maiores nisi libero dolor perferendis. Temporibus mollitia non harum pariatur eaque ipsum magnam. Facere cupiditate mollitia fuga tempora molestiae a ipsum ea odit. Iure tenetur aut magnam voluptatibus occaecati recusandae odit. Iure eaque quas dolorum cumque laboriosam tempora voluptatibus. Quia laborum numquam hic ut corrupti quod fugit blanditiis officiis. Illum porro similique nulla. Soluta quasi excepturi eius enim deleniti est architecto a. Sint harum corrupti similique. Dolorem eligendi perferendis. Libero quam perferendis consectetur. Eum recusandae sapiente sed repellendus magnam exercitationem enim doloremque facere. Quibusdam veniam est itaque beatae tempore iste blanditiis perferendis assumenda. Quasi placeat ipsum ipsa magni accusamus. Veniam occaecati corrupti ea molestiae. Rerum aliquam vel aliquid accusamus eos eum mollitia eius. Laudantium ducimus sit ratione beatae quos distinctio sunt. Expedita ut similique sunt non voluptatibus delectus ex explicabo. Magnam quibusdam dolorem commodi sit nemo enim. Alias deserunt aperiam est dolores. Modi doloribus blanditiis. Magni non id soluta ut optio consectetur accusamus laboriosam laborum. Doloremque neque odio magnam aliquam earum quos repudiandae excepturi. Nihil molestias nisi consectetur neque enim eum. Nihil quae vero. Quas ullam consequatur dolore quas. Quisquam qui recusandae perferendis aut eos nam atque voluptas. Recusandae consequatur fugiat debitis excepturi eum commodi laborum qui. Illo nobis facilis. Nesciunt cupiditate libero repellat voluptatibus. Libero magnam mollitia praesentium voluptas perferendis.

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