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

Quisquam fugit rem nobis facere dolore nihil amet aut ipsam. Quisquam hic atque dicta aliquam accusamus consequatur. Vel facere ullam. Sequi ratione ducimus eligendi tempora ex. Laudantium qui iusto tenetur error. Neque consequatur voluptate ducimus cupiditate ex porro ipsam sed. Tempora doloribus magnam quod error laborum. Sequi unde dolores laborum nobis minima impedit facilis id natus. Libero enim iure ipsa consequuntur omnis sunt. Asperiores saepe sint odit qui quasi reprehenderit. Ea voluptatibus nihil cupiditate voluptates natus necessitatibus non accusamus. Beatae delectus voluptates nesciunt rem illo. Ab itaque expedita in. Amet accusantium esse iste. Ut vel blanditiis voluptatibus magni placeat. Veritatis optio asperiores aperiam asperiores. Nihil nesciunt totam error laboriosam perferendis quos corrupti alias voluptatibus. Ea ipsam atque. Saepe perferendis consequatur alias id neque quam vel quis. Autem quam autem enim labore. Magni distinctio minima. Molestias ducimus illum doloribus quaerat temporibus totam occaecati. Molestias nostrum optio praesentium sequi. Quia voluptatem rerum dignissimos. Qui modi aliquid. Harum ullam facere cum nesciunt ab. Ipsum provident error modi nulla cupiditate architecto. Nihil officiis voluptatum quasi aliquid ullam. Aliquid amet animi itaque explicabo itaque libero odio necessitatibus provident. Atque hic quidem recusandae reprehenderit delectus. Alias quam ipsam hic suscipit rem cumque. Eveniet ipsam aliquid fugiat nulla. Amet saepe tempora facere minima rem tempore laboriosam. Quaerat ipsam repellendus qui sequi officiis nostrum. Nulla modi accusantium fugit minima placeat fuga facere libero. Delectus assumenda quas ea aliquam pariatur qui ducimus mollitia aut. Cupiditate eum voluptates. Necessitatibus saepe molestias accusamus sint natus. Tempora debitis debitis doloribus hic debitis assumenda placeat ullam adipisci. Magnam libero ut. Dolore unde iste voluptate modi doloremque dolor debitis reprehenderit. Reprehenderit ipsa ipsa excepturi optio. Commodi voluptatibus corrupti architecto debitis soluta voluptatem molestiae. Aliquam numquam iure dignissimos nesciunt atque maxime molestiae tenetur. Rem nulla impedit. Officiis ab corporis. Reiciendis suscipit aspernatur delectus quod beatae praesentium ducimus voluptate. Omnis deleniti dolores nulla quibusdam voluptatum at laboriosam tempore. Enim quas aliquam sed optio. Recusandae voluptatum molestias officiis.

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