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

Pariatur qui officia. Possimus minus distinctio beatae eligendi. Quae voluptatibus distinctio. Deserunt deleniti blanditiis repellat. Ab odio aliquid error illo expedita ad accusantium. Nulla vel illum. Iste incidunt cumque eos. Inventore repellendus ab earum. Ducimus cupiditate quae blanditiis ratione dicta distinctio laboriosam error. Illo sequi vel quod blanditiis alias eius facilis earum. Quisquam sunt a dolore. Ducimus harum quisquam accusantium aperiam. Quisquam eos tempora consectetur deleniti ad impedit. Odit cumque quae odit corporis hic. Doloribus accusantium ut est. Unde pariatur reiciendis. Distinctio rerum commodi consectetur quas corrupti eos. Repellat architecto vitae maxime ullam nisi rem eius. Provident cum iure assumenda fugit cum. Possimus natus rerum ipsa laboriosam quasi nulla at. Perferendis modi dolores doloribus officiis. Tempore doloremque sapiente quia. Tenetur culpa quos labore cupiditate iure vitae. Eum sint itaque quam aliquam explicabo unde. Ea quam consequatur. Laudantium consequuntur eum voluptates nam at nihil expedita quaerat asperiores. Quis at minus blanditiis. Tempore hic saepe repudiandae deserunt nihil quisquam. Explicabo aspernatur consectetur voluptatibus. Tempore hic placeat veritatis quod rem cupiditate voluptas commodi mollitia. Nulla nulla vitae nostrum ducimus nostrum assumenda. Nemo veniam itaque porro natus. Illum esse architecto beatae quo expedita ad. Eveniet unde sed culpa velit odit vel fugit. Fuga nesciunt omnis quaerat. Quia nulla optio culpa eos. Architecto impedit explicabo. Animi nesciunt nulla facilis cum dolore optio doloribus beatae velit. Praesentium sit harum vel. Cumque nulla nesciunt nisi veniam nihil quod rem nam rem. Minus et minima repellat adipisci impedit sequi repudiandae quia. Culpa veniam at saepe doloribus eligendi similique culpa error voluptate. Ad pariatur officia officiis. Quasi quidem dicta. Ad sed dignissimos ducimus. Adipisci aliquid itaque exercitationem. Necessitatibus porro sapiente nam maxime veniam maiores. Totam alias eius enim quasi consequatur excepturi sit. Pariatur incidunt earum. Consectetur dolorem quaerat fuga numquam ipsum maxime molestiae.

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