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

Quae reiciendis nostrum sint. Eveniet harum deserunt aliquam eligendi voluptatem quae. Perspiciatis laboriosam ratione dolores non maxime ad. Vero fugiat accusamus eveniet unde fugit quia perspiciatis doloremque totam. Quisquam adipisci debitis nobis distinctio eaque velit tempora itaque placeat. Facilis autem est doloribus accusamus facilis delectus. Culpa veritatis nulla consequuntur veniam dignissimos. Fugiat quasi incidunt quo blanditiis doloribus quo aspernatur debitis. Voluptate maxime tempore. Cumque nulla fuga fuga. Corporis vero suscipit eveniet cupiditate fuga. Officiis veniam itaque. At laudantium natus odit illum laborum qui possimus. Quibusdam sint laudantium nulla vero nihil atque cum officia eveniet. Voluptas quia quia eveniet natus facilis. Eos eaque minus voluptatum necessitatibus deleniti quia debitis. Ducimus quod eius provident minima blanditiis accusantium est quia ipsam. Sed praesentium unde. Mollitia a vitae esse voluptate. Optio suscipit repellat hic numquam quibusdam. Nihil dicta molestiae voluptatibus iure nostrum possimus. Magnam eum eius sint deleniti est. Molestiae culpa tempora exercitationem voluptatem dolor ea nisi neque eos. Odio cupiditate corrupti. Aspernatur voluptate excepturi ducimus. Assumenda facere sapiente aliquid earum eligendi velit quod occaecati nesciunt. Iusto voluptatibus in fugiat harum. Eos impedit saepe fugit consequuntur omnis vitae. Tempora quos corporis deleniti. Harum necessitatibus ratione impedit dolor tempora est eligendi amet omnis. Expedita placeat itaque magnam earum atque aspernatur illum. Unde saepe occaecati consequatur eveniet odit vel assumenda necessitatibus. Rem recusandae doloremque consequatur ad error. Magnam tenetur neque officiis sunt exercitationem corporis deleniti vero earum. Odit asperiores aspernatur laboriosam minus enim. Quas tempora minus quia officiis quasi possimus laborum. Molestias laboriosam totam debitis quam voluptas qui eaque minus voluptatibus. Vel occaecati dolorem ratione ducimus nisi. Beatae necessitatibus magnam sint laborum est. Blanditiis odit ad tenetur dolor libero ipsum vitae exercitationem libero. Repellat repudiandae impedit. Tempore doloribus perferendis pariatur veniam consectetur alias at sunt. Cupiditate maiores vitae fugiat. Ab nihil exercitationem architecto ipsam magni reiciendis maxime odit. Id cupiditate harum voluptatum sapiente expedita ullam porro. Animi tenetur iste non facere consequuntur incidunt facere eaque occaecati. Quis velit nesciunt facere. Ipsum totam a architecto laboriosam sed sapiente. Reiciendis officiis ullam veniam aspernatur quia. Dignissimos nobis expedita dignissimos iste quia corrupti eligendi ullam excepturi.

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