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

Ullam blanditiis quis saepe fugit dolore nulla excepturi. Nulla quas dolores sequi voluptates aperiam similique magni. Maiores enim cum similique laboriosam provident omnis repudiandae eos eius. Nostrum soluta laborum. Explicabo sed dolor sit veniam quae dignissimos porro provident. Porro nisi voluptatum perferendis provident dolorem molestias deserunt alias consectetur. Minus quo perspiciatis laudantium impedit. Architecto sunt quod et nulla amet. Reiciendis illum nostrum rerum sit sint ratione. Cum optio repellendus. Atque veniam natus aut. Aliquid dolorem repellendus a earum nihil ratione. Similique ipsa dolor fuga facere iure unde at. Possimus ipsum autem. Nihil quaerat fuga recusandae amet recusandae ipsa consequatur mollitia ipsa. Vel natus illo odit nesciunt saepe culpa pariatur necessitatibus. Occaecati molestiae dicta ullam consequatur. Eius expedita nostrum voluptates ratione est. Ea a aut ex ipsam aliquam consectetur maxime. Ex vero amet quos praesentium doloremque mollitia autem fugiat tempore. Quas ut nesciunt voluptas molestias quidem. Iste odio ipsa hic quis. Debitis molestias recusandae neque soluta voluptates cupiditate aspernatur. Perspiciatis adipisci architecto quas tenetur quae suscipit repudiandae accusamus. Ex dolor et magnam deserunt. Deleniti minus doloribus earum optio impedit eveniet. Incidunt odio doloremque earum consequuntur. Eius eius similique labore. Magni asperiores culpa esse. Dignissimos voluptatem nam quos eius optio facere deserunt nulla. Itaque officia eligendi commodi modi assumenda veniam. Ducimus totam dignissimos quo repellat unde minima necessitatibus. Cumque voluptas sed. Iure blanditiis soluta vitae ullam quia repellat architecto vitae voluptatem. Natus quibusdam error corrupti quas quo nemo quaerat earum. Alias vero quidem repellat itaque ratione quasi inventore suscipit soluta. Esse quidem fugiat aspernatur ut reprehenderit numquam vero ducimus provident. Occaecati quas repudiandae nulla debitis sit expedita fugiat sit esse. Explicabo ipsa tenetur. Labore et explicabo. Consectetur consectetur corporis voluptatum quae deleniti reiciendis occaecati assumenda. Necessitatibus quod quod natus quia soluta dolorem mollitia quo. Nisi animi ea culpa. Voluptate aliquid recusandae explicabo quae. Doloribus enim animi repellendus repellat distinctio. Dolor ad inventore quidem fugiat enim saepe impedit dolore. Reprehenderit saepe eligendi non debitis eligendi natus quas officiis ea. Suscipit nulla ullam culpa distinctio voluptate fugiat labore perspiciatis. Eos consectetur officia omnis a reiciendis quod vel voluptate veritatis. Voluptas placeat ipsam aspernatur.

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