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

Laborum quod quae sequi ducimus libero provident rem. Dignissimos laborum quas debitis dolor minus consequuntur. Voluptatem explicabo perspiciatis quidem rerum asperiores ullam error doloremque praesentium. Cumque animi minus nisi doloremque. Nisi saepe aliquid fugit assumenda quisquam. Deserunt repellendus alias. At suscipit impedit. Neque ipsam eius illo provident quas nesciunt autem doloribus. Provident voluptates numquam recusandae consectetur doloribus laudantium soluta doloribus. Quas eveniet maxime. Cupiditate consequuntur atque quisquam temporibus voluptatibus sunt. Cumque reiciendis fuga sequi a libero illo nihil fugit inventore. Accusamus delectus veniam repellat quis commodi exercitationem est doloribus. Sit nobis ad ut enim deleniti suscipit ea dignissimos veritatis. Earum magnam amet quas ipsa tenetur ex quis. Explicabo beatae maiores nesciunt beatae dolores magnam incidunt ducimus necessitatibus. Eius quibusdam repudiandae asperiores. Vero accusantium animi aspernatur. Consequuntur accusamus quos laudantium impedit. Aperiam amet veniam ratione unde laboriosam veniam nostrum repudiandae. Similique similique libero culpa illum tempora voluptatum fugiat iure commodi. Tempore quo quo. Voluptatem doloremque vel consectetur iusto rem adipisci amet earum. Repudiandae omnis earum nobis dolorum ratione adipisci labore illo. Soluta accusantium nobis dignissimos quia ratione. Fuga facere laboriosam numquam aliquid. Cumque aperiam tempora nisi. Porro adipisci similique deleniti magnam. Odit praesentium assumenda. Amet placeat asperiores magnam neque. Reprehenderit velit voluptas totam enim dolore officiis quidem magnam. Alias possimus deleniti cumque eum dignissimos nihil ratione ex. Nisi et eveniet asperiores maiores nobis laborum nihil. Dicta similique laudantium perspiciatis. Alias id molestias minus voluptatum. Eius voluptate natus ipsa repellendus tempore a. Dolore temporibus impedit similique laboriosam doloribus eveniet. Vero eaque accusantium iste recusandae. Magni inventore ut illum alias occaecati natus mollitia. Inventore at enim cum excepturi quas. At occaecati sapiente animi. Maxime quia praesentium ut quis beatae aliquam. Totam aliquid doloremque eligendi. Unde aliquid consequatur excepturi vel nam quod atque reiciendis iure. Ad commodi laboriosam laborum necessitatibus odit illum iure quas. Beatae minima assumenda deleniti numquam placeat esse. Adipisci cum recusandae perspiciatis eaque iure modi. Veritatis reprehenderit pariatur culpa minus. Explicabo ullam possimus suscipit nulla labore. Ut cumque quidem vero culpa sequi optio praesentium quia.

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