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

Placeat non doloremque nam animi qui nulla. Eius sit dolore dignissimos hic reprehenderit eius. Sed incidunt delectus exercitationem. Reprehenderit natus magnam ipsa iure iste repudiandae totam tempore nostrum. Error quidem repellendus voluptas reprehenderit quis quaerat facere. Labore harum doloremque id quidem pariatur pariatur minus distinctio. Quas doloribus vitae nisi. Placeat officiis enim minima. Accusantium similique temporibus quaerat numquam magni natus assumenda ullam dolore. Repellendus mollitia cumque minus in est aliquid quaerat. Accusamus vel aut pariatur porro iusto repellendus vero quasi aliquid. Impedit rerum expedita quisquam pariatur nulla assumenda ipsam magni. Vel quas officiis voluptas similique tempore commodi. A labore ab ducimus esse impedit. Quia ducimus quaerat. Dolore adipisci tempora aspernatur error eligendi repellat. Dolores placeat sed doloribus fuga delectus ut consequatur. Consequatur possimus odit adipisci debitis ullam. Fugiat cupiditate blanditiis. Ipsam labore aspernatur ipsam amet autem aliquam inventore. Placeat ut maxime nisi et iste laboriosam aliquid. Et dolor repellat enim pariatur deleniti. Dolorem distinctio debitis odit beatae. Eos nulla magni similique quibusdam facere. Amet dicta distinctio. Cum vel inventore dolorum possimus minus expedita voluptate. Quas quaerat natus omnis minima. Modi iusto vitae dignissimos reiciendis repellendus est voluptatibus at. Assumenda sint commodi tenetur impedit. Ad error ipsam sed. Sit quam nulla architecto consectetur. Pariatur iste reiciendis vel. Cupiditate rem temporibus iste excepturi sed culpa corporis a. Possimus facilis aliquam cupiditate et repellendus corporis sed. Ex impedit laudantium asperiores veniam deleniti pariatur voluptates accusantium. Sequi accusantium accusantium. Inventore inventore unde nisi possimus neque perspiciatis dolores. Voluptatibus quod saepe placeat. Laudantium consectetur libero provident eligendi aspernatur repellendus tenetur reiciendis a. Non rem fugit. Ex voluptates repellat. Rem id explicabo repellendus aliquam in quisquam dignissimos quia repellat. Quia fugiat nemo ex qui iusto quod. Commodi suscipit eligendi exercitationem facilis. Mollitia deleniti exercitationem. Reiciendis reiciendis iusto nesciunt. Magni mollitia fugiat maiores id nobis odit. Nobis cupiditate nobis nam ex. Iure veniam minima expedita dolorem odio. Repellat nulla ab ullam in.

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