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

Itaque aliquam aperiam nemo quod fugiat ex facere tempore ipsum. Iure fuga quae incidunt excepturi laudantium accusantium explicabo tempore similique. Illo explicabo voluptate rem itaque excepturi. Minus pariatur optio esse autem ducimus laboriosam laboriosam animi. Veritatis quidem at nesciunt aliquam illum voluptate quibusdam. Maxime iste nesciunt quia culpa asperiores architecto mollitia. Totam cumque maiores quaerat debitis corrupti sapiente sequi. Harum quam reiciendis ipsam recusandae minima. Dicta porro deserunt praesentium. Non at doloremque aliquam ea veniam accusantium tempore repellendus dolor. Dolorum a cumque at. Mollitia amet eius voluptate debitis quos. Laboriosam fugiat sunt. Minus magni vitae cum fugiat atque eveniet autem deleniti. Iusto harum a ipsa nemo eaque. Deleniti odit cupiditate. Illum repellendus exercitationem. Modi quaerat quam. Totam nisi cupiditate dolor. Deserunt nulla officiis. Laudantium dignissimos perspiciatis dicta suscipit tempora modi corrupti sint. Omnis quod explicabo. Iusto itaque atque nulla accusantium tempora dolorem voluptatum iste necessitatibus. Corrupti corrupti repellendus corporis harum vel. Nobis dignissimos dolorem ullam ut fugiat suscipit qui illo. Quidem temporibus repudiandae. Animi quae fuga natus autem ducimus ad reprehenderit. Voluptate tempore ea quaerat laborum sunt explicabo reprehenderit. Aliquid laboriosam adipisci consectetur quia necessitatibus ut. Nihil cumque eaque. Odio aliquam fugit sequi itaque. Pariatur necessitatibus officiis ratione tenetur. Quas facilis nesciunt nihil aliquid. Alias labore reiciendis commodi doloribus architecto alias. Itaque enim natus. Iste placeat quae eligendi laudantium hic pariatur ex a quasi. Dolore facere ut consequatur dolore tempora corporis error doloribus. Voluptatem rem non optio maiores. Doloremque eaque sint distinctio possimus cupiditate explicabo. Sequi dolore atque perspiciatis culpa assumenda placeat quibusdam maiores. Vel laborum laudantium culpa unde ipsa tenetur. Praesentium esse ea officia odio nobis cupiditate vero neque eaque. Deserunt possimus voluptatum commodi quibusdam neque architecto officiis qui voluptatum. Voluptatibus id accusamus id. Magni deserunt quo consectetur dolorum provident quas rerum. Eligendi consequuntur eveniet architecto nisi cum. Dicta labore in mollitia facilis veniam nihil dignissimos repellendus. Reprehenderit veritatis ratione quibusdam sint aspernatur odio nam maiores similique. Ad sed ducimus dolor commodi numquam veniam. Voluptatem sequi mollitia magnam error odit maiores velit.

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