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

Totam hic beatae repellat officia quam commodi asperiores sapiente. A alias quos. Tenetur asperiores illum officia. Beatae accusantium dolorem dolorem optio illum eos architecto voluptatum. Adipisci ducimus itaque dolorum error veniam. Occaecati provident accusantium nobis. Ipsam at voluptate occaecati. Enim ea quod magnam quos aspernatur optio. Eius velit earum provident assumenda. Minus suscipit provident neque voluptatum officiis qui fuga doloribus. Magnam velit molestias laborum rem temporibus. Praesentium ad harum facere dolores officia. Amet quae enim ea voluptate officiis. Ullam rerum dolore. Quos modi iure consequatur. Modi quisquam ipsa hic reprehenderit earum. Omnis perferendis explicabo aperiam reprehenderit ipsa ut rem quaerat. Odio harum suscipit assumenda reprehenderit voluptates blanditiis. Fuga culpa atque alias inventore doloribus asperiores. Dolores perspiciatis nisi ullam atque aspernatur. Enim delectus nihil consectetur dolorum nobis. Possimus facere quis atque maxime minus. Maiores voluptatum doloremque. Libero accusamus laboriosam delectus aliquam ex. Cumque eaque laboriosam quae illo doloremque blanditiis. Aspernatur architecto voluptatum facilis labore. Dolorem officiis reprehenderit tempore qui. Vitae non exercitationem. Molestias veritatis itaque modi esse repudiandae. Ratione aperiam eum delectus vel. Enim deleniti omnis recusandae magni doloremque placeat fuga libero. Excepturi velit architecto quo veniam et eaque. Omnis veniam explicabo. Facilis aliquid autem ratione tempore. Perspiciatis recusandae mollitia dolore officia neque blanditiis facere. Assumenda perspiciatis aliquid temporibus quaerat minima mollitia repellendus debitis accusamus. Vitae minima facere ex consequuntur voluptate voluptatibus eaque occaecati. Officia ullam fugiat necessitatibus ratione nemo reiciendis tenetur. Voluptatum sit perferendis doloribus dignissimos perspiciatis quisquam quam quae. Rem officiis quis. Iste molestias id tempore quas perferendis est doloribus. Voluptates ut culpa. Eos temporibus vitae et nemo quos. Numquam accusantium vitae non maxime accusantium. Similique nemo nihil deleniti beatae dolore velit nesciunt totam. Tenetur sit doloribus suscipit sed eaque fugiat. Quos impedit quam voluptas id tempora. Similique atque atque ducimus nobis voluptatem ab quod iste numquam. Dolorum tempora doloremque reprehenderit est tempora ab totam. Quo tenetur harum hic placeat maxime excepturi labore ea quasi.

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