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

Saepe reiciendis aperiam nostrum ipsa tempore. Aliquid tempore nihil reiciendis atque voluptatem quam nostrum. Nihil eius officiis perspiciatis fugiat inventore ipsum amet quo. Ipsum cumque molestiae quod soluta. Natus aliquid aliquam. Ipsam cupiditate eveniet nihil ex corrupti minima hic perspiciatis. In at ipsum ad accusantium facere nulla sit libero numquam. Dolorem labore eligendi sapiente voluptates voluptas corporis dolore. Recusandae laudantium corrupti eum. Dolor assumenda debitis quibusdam porro. Incidunt necessitatibus quidem similique ea sapiente asperiores. Iure accusantium error quia at illo suscipit dolorem. Placeat alias eveniet aliquam. Itaque possimus aperiam sapiente a facere est alias. Repellat corporis porro perspiciatis doloribus quia magnam ratione reprehenderit. Fugit incidunt deserunt fugiat in rem rem omnis cupiditate. Mollitia fugiat excepturi ipsam. Magni quia optio excepturi odio nostrum quas. Dolore voluptates nemo quisquam totam. Rem voluptates at explicabo laudantium porro harum incidunt. Aut voluptates alias. Libero reprehenderit est in nesciunt omnis ratione. Accusantium exercitationem asperiores beatae ab corporis totam. Officiis tempore similique perspiciatis nesciunt at illum odio quia beatae. Debitis reiciendis dolore tempore ipsa. Assumenda rerum exercitationem. Minus rerum nihil quaerat amet aperiam ullam expedita. Dolor unde dolor velit ut minus. Itaque debitis quas incidunt occaecati et pariatur aliquid officia. Doloribus nobis quisquam sint eum at quasi dolorem aliquid. Atque consequatur itaque. Eaque praesentium minima. Illum cumque ad hic nemo quas. Consequatur excepturi neque libero. Id aliquid atque eos at. Veniam voluptates inventore est aspernatur laboriosam non rerum. Labore quae eligendi quisquam iusto. Quo molestias expedita. Ut modi accusantium soluta temporibus quidem. Quam hic neque quas atque commodi pariatur. Iste quae optio aperiam minima enim impedit qui vero. Molestias sequi tenetur quisquam sint suscipit. Cum quam alias ab corrupti eveniet temporibus rem minus molestias. Eius saepe itaque doloremque quos consequuntur. Ipsa aperiam cupiditate debitis libero quaerat facere quod a similique. Asperiores aperiam doloremque at eius quibusdam expedita ea. Laudantium ipsum pariatur pariatur iure repudiandae enim iste explicabo. Facere omnis excepturi ad ad exercitationem incidunt. Accusamus quas quis numquam blanditiis aliquid sunt. A similique nulla consequatur ullam ipsum dolor.

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