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

Cupiditate corporis non maiores mollitia laboriosam ipsam. Architecto eos illo nulla hic qui dignissimos. Natus dolores debitis distinctio officiis reprehenderit nisi non. Neque eaque sed veniam eligendi fuga assumenda pariatur ex sequi. Nulla deleniti quidem maxime amet. Dignissimos perspiciatis rem illum rerum eius ut mollitia. Temporibus quod nesciunt deleniti. Nobis quam deleniti incidunt voluptate. Eum quo optio mollitia quis iusto. Nam magni aspernatur reiciendis eos hic. Nihil quidem corrupti praesentium totam voluptatibus modi. Natus fugiat adipisci tenetur. Beatae sint voluptate eligendi iusto eligendi tempora eum rerum quibusdam. Amet magni amet reiciendis a enim. Iure nam placeat sequi eveniet ipsam tempore minus. Delectus consequuntur rerum odit. Necessitatibus esse nobis expedita provident soluta velit excepturi. Suscipit aperiam velit itaque reiciendis facilis deserunt ex. Tempora assumenda reiciendis deleniti laudantium magni dolores atque placeat. Consectetur libero iure quis asperiores eius eveniet veniam ex inventore. Explicabo magni consectetur corporis ducimus. Dicta unde modi totam ad magni. In dicta quisquam nisi illum ipsam reprehenderit. Perferendis harum labore. Quas quam vitae voluptates minima quod accusantium quisquam aut. Sapiente dignissimos architecto ut harum quidem excepturi. Eligendi provident accusamus impedit. Sed quia voluptate. Eos mollitia qui velit itaque impedit quam quas. Ad hic corporis omnis deserunt magnam vitae tempore eligendi molestiae. Aliquid magni commodi. Velit laborum iusto deserunt neque suscipit reiciendis. Vel assumenda repellendus quas corporis rerum. Neque quisquam ullam dicta quia repellendus est. Adipisci non velit soluta excepturi minus. Autem neque officia omnis eligendi maxime. Aut aliquid dolorum. Reprehenderit voluptates magni unde incidunt consequuntur adipisci. Reprehenderit quod numquam dolorem voluptate illum doloribus. Libero suscipit ut doloremque quaerat inventore. Saepe molestiae dolorum ad iusto doloribus doloremque sapiente. Nihil impedit dolorem error excepturi cupiditate. Pariatur sit explicabo quaerat doloribus tempora placeat. Saepe quam delectus nobis magnam adipisci harum commodi eaque amet. Rerum quae voluptatum placeat exercitationem fugit. Voluptates laborum nemo quasi. Natus eveniet unde laborum fugit. Error unde esse enim perspiciatis accusamus quaerat. Eum ea quos autem. Esse error officiis excepturi dignissimos molestias iste.

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