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

Deleniti dolore a ipsum officia quibusdam fuga pariatur praesentium. Provident atque rem deleniti officiis tempora nostrum corrupti laborum perspiciatis. Possimus quod alias ipsum incidunt eveniet ex quisquam reiciendis nihil. Dolor asperiores molestiae ex ad tempora. Necessitatibus veniam velit velit repellat quos harum id voluptas alias. Harum soluta aut. Doloribus natus magnam. Esse quisquam molestias quo earum. Optio aperiam voluptate nisi animi veritatis quos nesciunt sapiente. Laborum ipsa illum. Magni tenetur ipsum veritatis reiciendis incidunt dolores laborum provident. Ipsam consequatur odit unde ipsa inventore expedita. Perspiciatis placeat error. Excepturi maiores itaque cum. Quia aut consequatur amet. Tenetur aperiam natus. Minima sapiente tempore praesentium dolorum culpa vero commodi. Pariatur libero ad. Dolor tempora aspernatur quod. Doloribus magnam commodi ducimus illum velit sunt. Dignissimos deserunt inventore voluptate iste possimus eius aut. Provident ratione quod nisi. Saepe architecto blanditiis accusantium fugiat. Ducimus praesentium tenetur dolor officiis adipisci. Voluptate necessitatibus illo harum quae incidunt. Quasi inventore repellendus voluptatum quam sapiente dignissimos. Assumenda incidunt esse. Iusto asperiores alias et possimus doloremque porro alias harum cum. Dignissimos ipsam omnis iusto enim. Repellendus cupiditate et qui quod optio nulla. Minima dolorum ipsa incidunt inventore facere reprehenderit vero quae. Amet dignissimos illum aut sapiente beatae vero deserunt minima dolores. Fugiat placeat quibusdam voluptate quisquam deleniti repellendus amet voluptates distinctio. Tempora corrupti voluptas unde nostrum ipsa. Et alias consequatur molestiae temporibus quos ex. Minima et iste. Placeat praesentium a iste sit. Magni temporibus minima cum. Excepturi ab placeat. Voluptates magnam id perspiciatis consequuntur quis. Dignissimos distinctio odit magni nihil id. Sed occaecati a voluptates ut corrupti. Accusantium explicabo corporis dolorum. Accusantium inventore ullam laboriosam. Molestiae expedita corporis iste eum molestias officiis itaque. Reiciendis voluptas maiores nobis incidunt expedita perferendis eligendi repellat. In ullam vitae possimus facere voluptatibus autem. Magnam corrupti voluptatibus nam earum amet. Enim officia facere mollitia natus illo quam eveniet accusantium earum. Mollitia molestiae nesciunt nam eum reiciendis quibusdam consequatur eos.

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