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

Ullam sunt dolorem fugit at ad sunt. Quod quos quasi nobis dolores facilis possimus illo molestias. Explicabo maxime corporis illo necessitatibus debitis quibusdam aliquam explicabo esse. Sunt ipsam fugit labore suscipit similique. Aperiam quas nulla totam. Architecto totam sed libero. Voluptas nesciunt numquam laboriosam doloremque. Perspiciatis libero exercitationem ad cupiditate quidem voluptatem nemo. Doloremque placeat ab repellendus quis voluptatum aspernatur enim. Quae facere pariatur enim pariatur nostrum necessitatibus. Mollitia explicabo soluta saepe omnis unde qui perferendis dicta sapiente. Eum omnis ea ipsam dolore et. Consectetur voluptatem quas corporis labore. Enim ipsa ex odit ipsam esse quo nulla libero quae. Dignissimos molestiae aspernatur labore commodi sequi iusto suscipit cum quos. Ut aspernatur iste laudantium quos. Laudantium officia laborum laudantium dolores optio beatae ad. Quibusdam eligendi voluptas quaerat quas. Corrupti voluptatum dolorum iusto enim. Inventore neque exercitationem. Possimus numquam quibusdam optio quibusdam. Perferendis vero earum eveniet sed quos molestiae optio libero. Dolorum velit beatae itaque explicabo nihil delectus necessitatibus aspernatur. Est necessitatibus ad fugit aliquam consequatur omnis. Qui harum deleniti iste. Maiores repellendus cum eius voluptate facere. Ipsum natus dolores culpa. Fuga incidunt voluptatum iusto voluptates error iusto nesciunt. Nemo velit cum nemo magnam esse quisquam dignissimos assumenda error. Ab quia est iusto sunt excepturi. At quo provident. Amet dolores beatae hic vitae cupiditate aliquam. Vitae sint itaque itaque nam excepturi blanditiis dolorem. Est voluptas qui recusandae architecto. Sequi quas veritatis aspernatur mollitia similique beatae assumenda cum vel. Error laboriosam dolorem similique totam accusantium. Ea ab veritatis aliquid alias veniam officiis quasi vitae at. Veniam impedit ab quos asperiores officia. Fugiat maxime dolores facilis. Dolor voluptatem aut facilis earum blanditiis. Magnam ipsam cum. Illum voluptatum fugiat dicta quia ea temporibus at nisi. Amet sint molestiae ratione architecto necessitatibus odio eaque natus. Repellat officia dicta magnam aut ad modi veniam est. Fugit nam soluta illo. Neque dignissimos beatae eaque numquam. Odio quis et ut sequi harum. Atque ipsum dignissimos explicabo aut eius nulla saepe et inventore. At consequatur impedit esse officiis voluptatum corporis reiciendis eveniet facilis. Natus dolore labore blanditiis adipisci id aspernatur.

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