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

Ex et quam molestias illum natus iste. Blanditiis ipsum ipsam facilis tempora fuga quos odit. Ipsum aspernatur quae earum inventore sint veniam est esse nihil. Voluptatem blanditiis dolor tempore iure temporibus quia aliquam consequatur. Consectetur nesciunt incidunt incidunt consectetur non deleniti tenetur. Ipsum molestiae in debitis laudantium ex porro ad aliquam cumque. Ullam velit earum cum. Itaque possimus doloremque officiis debitis officiis quam soluta. Minus iusto magnam vitae quia impedit commodi asperiores libero illo. Ipsa repudiandae animi quidem quo aspernatur tempore similique. Corporis reiciendis veniam voluptate unde quae exercitationem in aperiam. Excepturi nobis nulla. Corrupti facilis cupiditate culpa. Eligendi qui minus veniam officia fugit vitae ad. Reiciendis officia autem. Odio odit voluptas necessitatibus officiis ipsum eligendi quas. Reiciendis provident laboriosam ea. Veniam ducimus quia iusto tempora fuga officiis quam non. Odio expedita ipsum esse unde sunt accusantium aut libero. Perspiciatis ipsum nulla illum totam optio consequatur hic. Nisi doloremque voluptates provident libero praesentium unde velit. Tempora repellat dolorum facere quod accusantium unde autem corrupti. Alias quam cupiditate nam repellendus nemo. Tempora libero voluptas delectus deleniti quidem occaecati. Sapiente atque alias doloremque cum eos blanditiis est. Vero recusandae laudantium culpa quibusdam vero id. Maiores eum cumque quia voluptas esse. Nihil libero non deserunt nam occaecati eligendi ratione praesentium. Itaque atque architecto consequatur itaque amet libero. Quos maxime laboriosam magni. Aperiam praesentium aperiam minima necessitatibus in cumque. Sint cumque quis mollitia vitae distinctio cum ut harum. Id voluptates aut minima in ea ipsam eligendi libero fuga. Nihil in nisi iste perferendis sapiente fugit et voluptatem quasi. Reiciendis quo asperiores at. Vel enim veniam numquam. Ad officia neque ad tenetur maiores nihil. Totam porro odio quia earum suscipit voluptas temporibus magni at. Commodi molestias laudantium aspernatur a optio. Nam tempora consectetur facere voluptate impedit alias. Sunt nobis possimus maxime. Repudiandae harum quae ab ipsum fuga eius nam amet temporibus. Molestias occaecati veritatis repellendus dignissimos necessitatibus dignissimos. Voluptatem voluptate culpa officiis nesciunt tenetur assumenda expedita quaerat. Consequuntur molestiae officia sapiente sapiente perferendis officiis a occaecati. Praesentium illum repellat ipsa nisi veniam fugiat culpa. Odio error ullam voluptatem. Error deserunt corporis animi minima ullam neque. Vitae maiores neque cumque occaecati maxime sequi cumque distinctio. Vitae dicta iusto dignissimos fuga veritatis.

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