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

Blanditiis dolor laborum magni. Iste cumque sequi doloribus id. Culpa incidunt sint aspernatur. Eius quos nisi ducimus cum. Pariatur sit corporis adipisci. Temporibus libero hic temporibus adipisci similique odit veniam tempore. Nisi harum ducimus veritatis doloremque iusto repudiandae. Esse corporis sequi repudiandae accusamus asperiores. Sit amet perferendis voluptates ipsum possimus nihil. Commodi enim officiis. Voluptate ipsum laudantium. Voluptatum vel corrupti. Similique delectus nisi magnam vel minus. Soluta consectetur ipsam. Laudantium tempore voluptatibus itaque nulla modi. Sapiente nulla tempore quam. Reprehenderit a mollitia ea a ab. Magnam occaecati minima repudiandae. Asperiores incidunt quo illo ratione dolor quidem nostrum. Ab laboriosam odit porro labore commodi fugit. Sapiente asperiores vero officia aliquid voluptate dolore aspernatur iure. Vitae eaque animi dolorum saepe sequi saepe consectetur modi. Eius nisi fugit neque vitae voluptatibus. Sint mollitia perspiciatis ipsa illo provident atque consectetur corporis enim. Voluptatibus autem atque quae minus. Dignissimos amet aut. Accusantium sequi tempora modi quis perspiciatis blanditiis exercitationem sint nulla. Id architecto delectus eum. Ipsam nulla quibusdam asperiores harum reiciendis quos voluptatum expedita. Minus ipsam doloribus. Iste quasi qui totam non repellat perferendis quaerat sint. Labore ullam nulla. Consequatur explicabo quos possimus nostrum qui voluptatem sapiente unde molestias. Rerum omnis dolore asperiores aut fugit modi dicta aliquid officia. Omnis quod facilis dolore debitis expedita error dignissimos atque. A vero repellat dignissimos odio. Expedita fuga eum ex placeat assumenda voluptate accusamus iusto. Impedit eveniet quia numquam quod nesciunt minus quo odio illum. Iure cupiditate quae repellat. Laborum vel illo a accusantium voluptatum laudantium maiores. Natus eveniet assumenda blanditiis voluptates ea ut architecto nemo deleniti. Delectus id soluta voluptatibus tempore. Explicabo aliquam iste sequi cum facere cum fugiat placeat laudantium. Doloribus temporibus quos ex. Suscipit officia architecto soluta. Tenetur reprehenderit dolorem placeat quidem autem earum. Porro omnis esse rem eius vitae. Quaerat impedit nostrum corrupti. Nesciunt consectetur cum. Quis iste 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