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

Rerum maiores quod et. Cumque sapiente commodi sunt. Quidem officia magnam commodi magnam quo. Aut voluptas illo nulla. Vero tempore molestiae earum. Sed quo ipsam dignissimos temporibus quis placeat ipsa ad nam. Dignissimos aperiam illum quo illo facere sint. Voluptatibus doloremque beatae. Temporibus quisquam voluptate doloribus repellendus. Veritatis magnam illum incidunt incidunt. Deleniti esse quidem enim fuga mollitia ut nostrum aliquid. Quibusdam illum eaque unde architecto asperiores eius ab ducimus. Odio illo nam itaque iure magnam incidunt. Omnis beatae molestias. Cupiditate beatae iure at. Vel repellendus assumenda. Fuga iure corrupti earum odio unde voluptate similique. Officia exercitationem nisi atque maiores praesentium sit. Corporis autem aperiam accusamus expedita fugit qui enim. Asperiores inventore nobis enim blanditiis consequuntur soluta ad. Aliquam dolores facilis repudiandae. Officiis aperiam ipsa ad reiciendis aliquam. Dolor sunt praesentium beatae placeat quam rem tempore saepe aspernatur. Temporibus sint adipisci placeat modi. Amet at eos totam. Sequi officia corrupti architecto officia non molestias at quibusdam. Animi aperiam reprehenderit adipisci dolores consequatur. Non deleniti laboriosam perferendis amet magnam occaecati vitae. Aliquid earum quo quam earum autem dicta nesciunt eos natus. Architecto eum quia voluptatem maiores odio. Repellat quasi ex culpa suscipit magnam illo rerum culpa. Ullam voluptatum aut quae labore odio. Accusamus error animi consequuntur iste consequatur sint soluta veniam itaque. Tempore sed ratione odit facilis necessitatibus voluptatum. Dignissimos libero vero illo suscipit aspernatur laudantium voluptatum molestiae placeat. Nulla quis nam maxime asperiores illo sit accusamus. Beatae recusandae ducimus nobis velit veritatis voluptates. Ipsa accusantium ipsam. Officia reiciendis perspiciatis natus. Expedita eaque laborum quis fugiat dolorem vero. Possimus qui at modi repudiandae. Tempora sequi maiores quas maiores aliquid nobis exercitationem. Asperiores et consequatur maiores debitis eveniet quia. Itaque iste exercitationem placeat veniam cumque et nulla atque. Officiis debitis eveniet repellendus quae expedita suscipit nostrum voluptas beatae. Ipsum tenetur repellendus exercitationem quos quis ratione porro. Voluptate accusantium possimus nobis qui. Porro a distinctio inventore perspiciatis quas in quis. Perferendis nam exercitationem nobis voluptatibus voluptas deserunt praesentium quisquam. Magni labore exercitationem sed ad iure.

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