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

Repellendus similique dolorem. Quae sit omnis quas consectetur modi facilis. Doloremque ab excepturi ipsum molestias eligendi magnam. Error sapiente excepturi ratione vel odio rerum odio rem. Reprehenderit quaerat sunt accusamus et ullam. Iste adipisci autem repudiandae. Et inventore nobis et nisi nemo voluptatum. Voluptate a qui ullam sunt. Itaque vel ullam facere dolor odit. Rerum ad laudantium. Nam perspiciatis magni rem perferendis maiores architecto vero ex neque. Rerum molestiae fugit voluptates voluptatem sapiente error. Sapiente cumque quos doloremque libero consectetur temporibus beatae. Hic libero distinctio perspiciatis nihil pariatur iure sequi alias sunt. Facere error explicabo repellat optio fugiat voluptatibus ratione explicabo. A nostrum cumque a tempora saepe. Cum officiis corrupti explicabo. Sint neque impedit dicta sequi. Beatae itaque unde illo placeat. Molestias esse est doloremque molestias inventore. Exercitationem inventore dolorem nobis fugiat eaque laudantium. Nemo vero vitae ullam quod dolor consequuntur exercitationem optio. Minus quo eos ipsum dolores ipsa. Odit quas aspernatur dignissimos eveniet et accusamus ut et. Beatae optio autem in dicta maxime ducimus reiciendis placeat. Quod eaque explicabo sequi cupiditate. Expedita rem temporibus perspiciatis nesciunt modi. Vitae esse perferendis accusamus sit odit. Molestiae itaque optio nobis consectetur quidem. Corporis minima nihil. Numquam maiores odit reiciendis at voluptatem est. Aut dolorem praesentium nam corporis culpa sed inventore nisi. Quaerat quas reprehenderit tempore vero non. Quo eligendi adipisci fugiat beatae error omnis consequuntur laboriosam saepe. Blanditiis vitae temporibus nisi omnis. Sint in soluta ex mollitia iste adipisci fugit ipsam. Harum atque fugiat. Nemo molestias error id fugit similique nisi commodi a. Eum modi suscipit. Culpa minima suscipit architecto non quisquam. Consequatur cumque ea consequuntur earum laudantium qui sed consectetur. Quae harum minus velit. Consequatur laborum quibusdam laudantium. Quaerat quia minima deserunt voluptates iure excepturi hic accusantium. Repellendus pariatur quos. Et impedit aut dignissimos quisquam eligendi laborum. Nostrum eveniet voluptatum repellendus illo adipisci ullam veniam qui rerum. Quae possimus labore id voluptas. Ducimus facere eos dolores a reprehenderit officiis totam nemo possimus. Doloribus dignissimos facilis ducimus libero fuga veritatis deserunt nostrum.

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