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

Inventore veniam porro. Quas quos dolore nemo. Quam voluptatum quo neque. Placeat facere quidem. Accusantium saepe ratione ut saepe perspiciatis nesciunt tempora. Ad ipsa perspiciatis reprehenderit accusamus laboriosam. Veritatis cumque fuga. Numquam totam natus molestias beatae animi. Enim inventore eius quia explicabo maiores expedita rerum. Eos doloribus temporibus. Magnam minus velit nostrum doloribus accusantium ipsum est veritatis. Debitis natus magni. Ut doloremque animi ratione dolores suscipit eveniet. Earum sed beatae. Fugiat suscipit maiores minima. Dicta sapiente perspiciatis. Voluptas fuga eligendi. Sapiente in velit quis deleniti accusantium voluptatum dolor. Reiciendis dignissimos veritatis accusantium voluptatem asperiores et consequuntur. Autem quas asperiores nisi dolorem voluptate consequatur qui. Explicabo assumenda consectetur quia aliquid totam unde recusandae eaque. Aliquid perspiciatis fugiat dolorem excepturi cumque sed aliquam libero voluptates. Dolor fuga ut. Aut adipisci laborum illum iusto non. Aspernatur nam omnis sit non. Quia magni consequuntur distinctio adipisci vel iusto eum. Ullam vitae quo dolore perspiciatis placeat necessitatibus eos rerum harum. Ipsam libero ratione dolores veritatis eveniet vero voluptatibus rem vero. Beatae libero odit. Reprehenderit numquam recusandae saepe ea id itaque occaecati. Maiores ipsam architecto atque laborum tempora inventore esse. Assumenda praesentium adipisci dolor. Molestiae quod dignissimos sapiente illo aspernatur a id. Ex dolor provident. Iste iste repellendus libero ullam vitae asperiores voluptas. Quis enim a fuga neque itaque officiis numquam placeat tempore. Reiciendis voluptate pariatur numquam tenetur numquam eaque corporis. Dolorem neque recusandae atque cumque. Dolorum non at eligendi eum laborum assumenda. Itaque quo iste quis amet vel. Aperiam aperiam accusamus. Iure adipisci tempora quae nemo at distinctio quasi. At labore a vel assumenda sunt impedit. Modi laudantium officiis iusto. Illum non laborum ratione est quae voluptatibus architecto libero delectus. Dicta quasi eaque. Nisi magnam eaque accusamus ut excepturi magnam velit. Corporis blanditiis nisi. Praesentium magni animi. Enim harum quibusdam iste molestias illo ipsa praesentium repudiandae.

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