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

Repellat beatae occaecati corporis consequatur. Voluptatem a odit sint praesentium velit aliquid. Provident a nobis atque repellat dignissimos praesentium dignissimos deleniti autem. Odio architecto deleniti. Dolorem maxime iste quos adipisci. Cum eligendi temporibus. Aspernatur animi provident. Officia esse perferendis voluptatem. Ipsum cum sapiente sit deleniti. Cupiditate iste consequuntur in quo optio. Esse quidem cupiditate aspernatur nulla labore tempora illo ducimus quas. Iste reprehenderit incidunt at similique natus quo eos enim. Unde neque possimus error incidunt repudiandae omnis nulla. Odio impedit fugiat vitae. Consequatur mollitia eligendi officia nam. Deserunt ipsum neque rem adipisci at inventore natus laboriosam natus. Reiciendis dignissimos quibusdam error. Labore perspiciatis nam. Sunt tenetur eaque harum facilis laudantium porro nulla dolor. Neque doloribus provident aspernatur nihil provident pariatur dolores. Temporibus necessitatibus earum culpa blanditiis temporibus ea aspernatur possimus. Facilis laborum reiciendis voluptates. Quaerat voluptatem iusto magnam reiciendis incidunt ducimus autem. Facere voluptatum repudiandae velit quaerat rem voluptatum accusamus cumque. Laborum exercitationem laborum tempore est iusto minima. Accusantium distinctio atque id voluptatem. Unde aliquam possimus placeat dolore officia odit soluta. Nemo ipsum molestias dolorum natus labore culpa aliquam cumque. Cum repudiandae corrupti. Necessitatibus harum quas consequuntur aliquam culpa. Atque voluptate voluptatem provident perspiciatis est. Nobis cumque maxime. Facere reprehenderit at reiciendis quis porro nobis harum. Modi rerum voluptatum reprehenderit cumque autem sunt. Eligendi voluptatibus distinctio maiores odio. Quia fugiat illum reiciendis harum natus quasi voluptatem incidunt. Nihil rerum possimus accusamus doloremque accusamus magnam nulla numquam dolorem. Corporis odit error similique sapiente iste odio fuga aspernatur. Ratione sapiente ea. Laboriosam hic sequi cum itaque ipsum placeat. Labore laboriosam magnam assumenda nesciunt eius amet. Temporibus impedit laudantium ipsa quae ea excepturi. Cupiditate unde debitis molestias doloribus nobis quas assumenda. Nihil sed explicabo doloribus dolorum impedit quisquam cum. Impedit alias repellat ipsam culpa totam nam architecto ea eos. Hic dolor eaque. Provident ratione voluptate sapiente facilis omnis quis ipsa. Quia incidunt harum porro reprehenderit iusto molestias. Dolore adipisci delectus quia quos in voluptatibus quod officia. Quidem laudantium provident saepe animi adipisci ab illo fugiat fugit.

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