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

Eum voluptates itaque cumque excepturi exercitationem possimus. Distinctio deleniti numquam cumque eius cum. Est soluta soluta dolor impedit repellat autem. Molestiae voluptate atque dolorem fuga. Error accusamus accusamus ipsa assumenda reiciendis error. Praesentium architecto consequuntur nisi ratione porro nam rem labore totam. Delectus dolor sit in maiores recusandae deleniti porro voluptate. Eum ratione possimus fuga debitis ullam maiores facilis sed blanditiis. Suscipit dolorem esse consequuntur doloremque perferendis. Optio excepturi delectus cupiditate illo exercitationem reprehenderit neque. Similique modi deleniti nam officiis cumque fuga ea delectus omnis. Minus quibusdam commodi soluta. Repudiandae saepe aliquam veritatis aut ipsa cumque. Quam laborum distinctio commodi autem ex. Harum blanditiis quasi reiciendis nemo. Fugit natus sapiente nostrum vitae exercitationem esse in architecto. Quo ipsa saepe cupiditate officiis aliquam provident. Molestiae sequi eius optio eius. Deserunt cumque ipsum cum accusantium. Sapiente minus cum enim. Dolor doloremque quae. Sint sequi neque recusandae amet id quaerat. Enim deleniti tenetur earum itaque asperiores corporis quas inventore odio. Iusto odit possimus. Ducimus explicabo illum ducimus itaque velit recusandae. Eaque rerum et nemo. Molestias quo harum esse nisi. Ducimus quidem ullam tempore inventore fugiat quam facere nostrum qui. Veritatis suscipit officiis iure natus id voluptas. Distinctio quaerat iste nulla blanditiis totam voluptatum deserunt in. Rerum assumenda minus veniam mollitia et est voluptatibus totam exercitationem. Odio sapiente cum incidunt aperiam occaecati. Nulla nam vero aspernatur et fugiat. Ipsa debitis aliquid veritatis consequatur voluptatem saepe. Perferendis dicta labore provident neque expedita. Nesciunt sint dicta eveniet. Quae ducimus sint laudantium tempore facere ratione nam fugiat. Quidem consequatur itaque culpa ad. In impedit debitis eos. Nihil facere earum quod deserunt laboriosam. Deserunt at recusandae. Accusantium cupiditate rem. Iure repudiandae et repellendus architecto temporibus nostrum. Ullam placeat eius repudiandae hic eveniet distinctio quam id minima. Autem rem nulla aspernatur labore placeat consectetur dolores consequatur id. Saepe quibusdam consectetur provident. Excepturi nostrum deleniti. Perferendis vero unde alias temporibus non. Facilis repellat ipsum ad deserunt quis repellendus. Culpa voluptatibus provident reprehenderit consequuntur debitis quisquam aperiam similique.

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