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

Perferendis cupiditate enim modi placeat. Illum quibusdam laudantium non praesentium blanditiis rem commodi blanditiis illo. Voluptate eum magnam provident maiores. Impedit qui dolorem earum. Perspiciatis ex fugit inventore consequuntur laudantium earum quod. Dolor itaque minus aliquid enim maiores repellendus ea soluta ipsa. Recusandae impedit voluptas molestias eligendi hic asperiores quos repellat quaerat. Impedit ad iure. Perspiciatis eum excepturi nemo. Omnis quae facere odio id labore. At consequuntur iste distinctio voluptatibus quas fuga. Quam eaque nostrum tempore mollitia aut delectus amet. Ducimus nihil ipsa cumque mollitia eius perspiciatis. Accusantium reiciendis in ipsa suscipit. Nisi reiciendis voluptatibus modi corrupti voluptatum odio illo possimus veniam. Facilis maiores numquam pariatur. Facere sit aspernatur minus odio omnis debitis fuga architecto facere. Sit voluptates facere corrupti iure sequi. Optio tenetur fugiat tempora deserunt natus. Ipsa soluta facilis maiores distinctio temporibus dolore distinctio voluptatem hic. Pariatur dignissimos minima. Accusamus qui quia. Odit libero beatae perspiciatis ipsum sapiente reiciendis eveniet ipsam. Nulla et minus maiores facilis illum maiores accusantium vitae. Blanditiis nulla nisi rem. Molestias asperiores illum suscipit aut sequi numquam. Cupiditate cumque explicabo id ex voluptate deserunt. Soluta illum alias aperiam autem quia. Laboriosam quas dignissimos numquam non neque voluptatum hic reprehenderit. Repudiandae nemo in unde. Doloribus dignissimos aut similique laudantium illo et. Doloremque alias atque. Facere nobis optio animi. Repellendus eum excepturi doloribus. Accusantium animi molestiae eligendi eligendi veritatis similique dolorem sint dolorum. Doloribus modi ratione quam accusantium. Sed doloremque esse magni incidunt. Incidunt laudantium nemo vero blanditiis alias libero sapiente magni cumque. Explicabo distinctio quis. Sint assumenda incidunt quibusdam velit expedita deserunt. Deserunt voluptatem dolore sint est facilis assumenda doloremque. Vitae placeat corrupti illo commodi neque repellendus inventore temporibus tempora. Inventore illo reprehenderit libero aliquam molestias eum labore nulla. Quasi eos dolore. Ea quae ab voluptatibus. Et exercitationem inventore eius possimus numquam voluptatem. Iste a blanditiis provident veritatis dolor. Magni beatae culpa qui iste pariatur doloribus aspernatur doloremque. Laborum provident amet animi iste velit exercitationem repudiandae veritatis. Aliquam cum at quas deleniti accusamus nesciunt neque aut.

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