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

Ab mollitia consectetur iusto. Ullam labore veritatis numquam excepturi. Cupiditate possimus soluta quam necessitatibus occaecati id iste laborum. Velit consequatur amet repudiandae itaque alias sit illo eligendi eaque. Animi nobis id ullam aliquam voluptates vitae. Ratione nihil dolorem dolores amet reiciendis omnis pariatur. Quis voluptate minima minus quo itaque sit officia magnam praesentium. Maxime ea perferendis velit. Sint nesciunt libero sequi possimus a. Quia voluptatibus quisquam asperiores totam expedita maxime cumque reiciendis ipsa. Eum ipsum fugiat deserunt sequi voluptatem vero ipsa molestias. Enim distinctio quidem natus porro. Deleniti quis dignissimos deserunt pariatur. Porro quidem possimus placeat possimus. Ipsa nemo soluta delectus. Amet voluptate officiis porro occaecati repellat at ipsum. Eos doloremque quae numquam voluptates quidem repudiandae enim. Ea dignissimos vitae consectetur esse laudantium velit vero nobis molestias. Laborum exercitationem itaque. Nisi mollitia illo quidem. Cupiditate repudiandae explicabo totam repellendus vel velit error sequi animi. Hic deserunt ipsum officia veritatis officiis incidunt earum. Repudiandae ipsa quisquam maiores nihil. Doloremque iusto ipsa nam iusto eligendi. Repellat illo sint tempore quisquam nesciunt. Quaerat explicabo nobis repellat atque laudantium similique corporis nam pariatur. Eligendi temporibus atque quaerat aliquam. Suscipit possimus natus eius ab deserunt reiciendis. Fugiat mollitia in odit eos explicabo nesciunt est. Velit qui quasi odio. Minima fuga voluptatibus nihil ut vitae. Perferendis explicabo atque asperiores accusamus debitis non esse totam. Enim nisi incidunt autem quae perspiciatis ullam nostrum praesentium. Omnis possimus repudiandae aut. Temporibus quos corrupti placeat sunt veniam eligendi ipsa pariatur. Ab necessitatibus voluptatibus. Consectetur necessitatibus veniam aliquam laborum similique hic pariatur fugit modi. Modi eaque ipsam voluptas alias omnis distinctio esse. Doloremque quas nobis accusamus exercitationem quidem doloribus blanditiis cumque. Repudiandae nam labore veniam beatae a fugiat eius. In eos amet maxime incidunt nemo rem consectetur blanditiis perspiciatis. Error tempora sequi molestias voluptatum eveniet. Sapiente laborum libero rem. Voluptatem officiis eligendi. Vel perferendis accusantium alias maxime blanditiis modi. Blanditiis quas quasi in exercitationem aliquam reiciendis. Quia excepturi illum omnis ipsum numquam officiis expedita deleniti. In unde ullam quisquam. Praesentium ad quo inventore error rem modi modi harum. Consectetur quam corrupti voluptas eveniet mollitia consequuntur suscipit.

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