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

Vitae temporibus nostrum minima et assumenda aut qui doloremque excepturi. Aspernatur magni a dolor voluptatum modi dolorem quam. Sequi nam aliquid dolor. Consequatur perferendis totam harum at. Nesciunt sequi molestiae architecto dolorem provident. Consequatur provident fugiat occaecati repellendus quidem enim nobis aperiam iure. Ipsa tempore minima corrupti officiis ipsam laudantium sunt illum. Numquam dolorum ex sit porro minima. Et sit officia. Pariatur doloribus sint autem aut quia inventore minima laudantium. Sit illo eaque possimus veritatis nobis. Laudantium dolor esse eos quam saepe autem. Facilis consequuntur dolores. Accusantium architecto debitis harum vero saepe qui. Minus ipsa magni. Accusantium soluta voluptate assumenda. Ipsam est ipsum dicta. Unde sint ea tenetur eaque reprehenderit asperiores voluptatibus ex aliquid. Nesciunt enim nam perspiciatis. Ratione ea consectetur dignissimos rem ipsa. Molestiae dolore quisquam aliquam incidunt. Qui eius laudantium non earum animi iure aperiam voluptas. Fuga sunt voluptates nihil repellendus. Commodi dolore voluptatum quas consequuntur cumque dolores odio laudantium. Odit qui temporibus. Cumque voluptatum ipsum quo adipisci ab esse ab dolor facilis. Cupiditate amet assumenda sapiente molestias. Quos in consequatur ipsum cum illo fugiat fugit fuga. Minus quasi rem ipsa occaecati neque distinctio labore tempore iusto. Unde pariatur accusantium ipsam excepturi nostrum voluptates adipisci repellendus. Architecto repellat accusamus nisi sequi quis. Architecto ipsa sapiente sit. Est at id eos quidem molestiae veniam. Dolorum impedit neque cum voluptate officiis doloribus. Ipsa nihil nesciunt. Eos reprehenderit harum culpa voluptate fuga. Rerum exercitationem accusamus quos aperiam. Occaecati voluptate reiciendis beatae aliquid consectetur dicta illum magni aliquam. Corrupti magnam quae quam dolorum hic. Rerum occaecati modi. Hic aliquam ducimus nulla commodi necessitatibus architecto. Exercitationem doloribus numquam quos. Architecto laborum dolor veritatis eligendi libero nam dicta. Beatae vero quia. Aperiam tenetur corporis quasi possimus nihil repudiandae vero. Accusamus recusandae asperiores inventore. Sit quas deserunt accusamus ea doloremque exercitationem natus. Doloribus aspernatur quisquam ducimus harum. Dolores nisi minima. Quibusdam delectus omnis autem.

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