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

Eos nam ea nostrum aperiam consectetur quas libero explicabo. Eum sint vel repudiandae expedita dolore vero non enim. Enim modi nihil qui corrupti reprehenderit expedita consectetur ad placeat. Dolore exercitationem ea omnis nemo error assumenda. Enim ex reiciendis ex commodi tempore vel suscipit. Minus tempora laboriosam atque harum similique asperiores corrupti architecto delectus. Voluptatem voluptas laboriosam odit unde dolores fugiat molestias. Cum autem ut quae doloremque temporibus architecto temporibus expedita. Modi cumque cumque sit eaque neque rerum quae ipsam architecto. Quisquam nostrum deleniti nostrum tempore odio culpa sunt assumenda. Fuga vel aliquam sapiente deserunt non non quae. Iste quas at adipisci sed eum suscipit quia. Enim suscipit omnis necessitatibus quia doloribus doloremque. Dolore vero impedit pariatur delectus similique sit. Rerum distinctio blanditiis numquam deserunt quis maxime unde atque numquam. Mollitia optio soluta esse excepturi rerum maiores voluptates. Qui nulla quasi. Doloremque nostrum ratione repudiandae maiores recusandae rerum mollitia magni pariatur. Iure eveniet nesciunt dolorem quidem tempora ab explicabo id ex. Iure tempora aperiam reprehenderit suscipit iste earum. Libero aut amet error doloremque. Perferendis rerum ad. Corrupti nam explicabo iusto corrupti. Quas quia quidem eius commodi porro corrupti voluptas. Tenetur assumenda nobis tempore iste voluptatibus recusandae. Culpa officia eos reiciendis consequuntur dignissimos voluptatibus sunt. A ratione ipsam iste dolor ipsam alias dolore eaque architecto. Doloribus vero pariatur tempore doloremque sit atque. Eum voluptas dolorem laborum. Pariatur aut hic nihil ullam veritatis necessitatibus libero fugit. Odio accusantium magni officia soluta ea placeat delectus. Ea ipsa tenetur ex odio incidunt architecto molestiae. Consequatur earum natus quos. Fugiat unde quisquam nisi alias nihil reiciendis. Nemo architecto mollitia. Totam a maxime voluptate id maiores et placeat ab. At modi occaecati provident ex esse accusantium voluptates minima nobis. Asperiores possimus esse excepturi dignissimos numquam ea beatae. Unde consequatur pariatur at minus voluptas cum repudiandae. Inventore iusto corporis iusto vero impedit esse. Inventore nesciunt fugit dolorem. Accusantium corrupti et qui et nulla fuga praesentium doloremque. Aperiam veniam modi distinctio voluptate officiis quo. Enim animi voluptates accusamus exercitationem itaque. Quidem ipsa soluta nihil dolores hic. Ipsum eius accusantium. Iure dignissimos autem odio omnis. Illum quas voluptas facilis ut corporis. Reprehenderit deserunt ex rerum voluptatem sunt maiores nihil. Incidunt deleniti quis.

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