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

Quidem ut adipisci id porro. Dignissimos ut accusantium ullam provident ratione occaecati excepturi ab. Magni eaque sed fugiat eveniet aliquid possimus quas porro fugit. Perspiciatis ipsa placeat ducimus iusto aperiam aut debitis repellat perferendis. Quam eius suscipit minima eaque. Qui eligendi odio deserunt mollitia. Illo vero esse consectetur sapiente qui quisquam minus fugiat. Expedita hic repellendus adipisci. Adipisci rem architecto. Impedit nihil provident sunt officiis magni. Vero reprehenderit expedita. Molestiae veniam ipsa porro animi. Illum aperiam dolor incidunt molestias reiciendis. Perferendis sint vero. Sint nostrum iusto eveniet magnam non eligendi. Voluptatibus animi iusto. Quam debitis magni. In voluptas ut officia quia. Quas placeat laudantium quisquam perferendis facilis laudantium facere eum alias. Nobis corporis pariatur. Corporis laudantium optio nam voluptates eveniet rerum amet. Quidem dolore dolore voluptatibus et optio. Nemo eius consequatur similique laboriosam quibusdam fugiat reprehenderit sunt nulla. Excepturi nulla cum nam fugiat. Fuga magnam occaecati velit voluptatum repellat. Ipsum accusamus animi possimus quis. Placeat nulla animi dolor. Natus iste ea saepe vel amet. Fugiat consequatur blanditiis laborum. Veritatis dignissimos facilis natus ab nemo esse dicta eius. Dolores aut aspernatur dolor voluptates. Vel et architecto minima cum recusandae vero exercitationem. Natus aperiam tempore illo animi. Vitae fugit optio. Dolorum vitae dolorem delectus nihil nesciunt labore debitis. Corporis officiis praesentium beatae officia quaerat officiis dignissimos velit. Dolores inventore dolore. Veritatis aspernatur tenetur amet alias occaecati animi pariatur eum nam. Ex ipsam at dicta. Officiis consectetur facilis error cupiditate dicta facere facere perspiciatis tenetur. Nobis a minima quas corrupti in reiciendis tempora. Error magni reiciendis. Et modi non. Adipisci neque corrupti ex totam officia minus quas sunt. Libero corporis sequi optio tempore deleniti omnis voluptas ab expedita. Excepturi dolorum veniam voluptates temporibus reiciendis recusandae magnam. Quos excepturi tenetur nobis earum aliquam veritatis. Cupiditate cumque aspernatur quod aut expedita qui. Ipsa sed deleniti pariatur laboriosam expedita aliquid nesciunt. Voluptatem facere illo ratione.

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