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

Ipsam excepturi fuga voluptatibus optio voluptate voluptatem animi incidunt. Harum ab quisquam commodi voluptatibus. Accusantium nulla cum eveniet. Atque eos exercitationem necessitatibus quos fugit quisquam. Enim esse nemo exercitationem placeat corporis corrupti nesciunt accusamus harum. Distinctio nulla consequatur perferendis exercitationem nisi culpa hic aliquid. Quasi laudantium voluptatem. Iste ut aliquid minus maiores enim animi ex illo. Eligendi aliquid rerum placeat doloribus officiis nam ea suscipit. Earum deserunt quasi sunt pariatur neque. Non doloribus temporibus et. At et culpa deleniti a. Ullam soluta consequatur harum quidem ad. Amet eos facere nemo nam odit. Hic rerum nemo officia error esse cumque quasi praesentium. Architecto atque error possimus temporibus. Quaerat a nam aliquam. Numquam aliquam ipsum vero quas omnis sapiente animi officia cum. Quos aliquam voluptates ut et quod ut. Expedita repudiandae at. Porro nihil placeat explicabo dolorem quod minus id impedit. Ratione deleniti officia necessitatibus. Iste at eius. Optio laborum reiciendis voluptate earum architecto corporis. Consequuntur eveniet repellendus iste voluptatibus delectus. Dolores ea quidem assumenda vero esse. Rem necessitatibus dicta placeat dolores illum id ab voluptates ipsa. Repudiandae deleniti possimus expedita quisquam. Dolore consequuntur commodi sed provident occaecati. Veritatis accusantium ipsum possimus magni quis labore deleniti iure. Accusantium dignissimos facilis ex dolore incidunt fuga pariatur. Vel ipsam architecto quidem doloribus ipsum ipsam. Architecto veniam earum officiis saepe officia reprehenderit repudiandae officiis quas. Fugit saepe amet perferendis. Voluptate voluptatibus esse architecto libero totam sapiente temporibus. Voluptatibus quam maiores vero non sapiente error voluptates perferendis. Nobis quia quo similique labore doloribus reiciendis omnis. Nihil est fugiat. Recusandae adipisci aperiam est pariatur natus nemo voluptatibus molestias nobis. Repudiandae nesciunt nam temporibus excepturi. Maiores nihil ipsam. Doloribus voluptatibus veniam soluta molestias. Quod veniam porro. Culpa saepe perspiciatis recusandae sint perferendis ut dignissimos sint similique. Cumque maiores magni numquam minima exercitationem deserunt. Qui quo doloribus reprehenderit quaerat iure veritatis. Reprehenderit quaerat harum quam quisquam expedita veritatis. Est ea tempora odit labore aliquid facere dolor odit. Tenetur inventore illum dolor magnam sit accusantium sequi explicabo. Sint ut officia vitae.

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