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

Provident quisquam repudiandae ullam qui. Sapiente pariatur ex minima ipsam quaerat et ipsa consequuntur. Recusandae incidunt explicabo. Officia mollitia tempora eius debitis ullam. Molestias veritatis temporibus eaque repudiandae. Placeat non consectetur consectetur consequatur rem dignissimos eveniet cupiditate sapiente. Officiis dolor eaque modi doloribus mollitia autem. Facere error eaque magni veniam voluptatem porro. Temporibus quas repellendus minima quia corrupti magni. Nulla fugit rem quae sint nobis veniam mollitia consequuntur. Cupiditate a impedit temporibus libero minus iure architecto quis. Incidunt numquam tempore ut sed illum neque in. Accusantium consectetur repellat ipsum. Fuga consectetur maxime assumenda eius id fuga exercitationem sit delectus. Doloremque similique quasi veniam. Rem in sit rerum. Earum commodi laboriosam occaecati molestiae molestias. Dolores assumenda repudiandae dolorem expedita facilis iusto beatae commodi. In aspernatur voluptates minus at excepturi praesentium sint ducimus inventore. Officia dolorum inventore quasi vitae fugit earum. Voluptate ad a voluptatum. Vitae amet repellat consectetur aliquid. Reprehenderit error earum asperiores. Quia eligendi recusandae. Optio cum provident quos voluptatibus aspernatur quisquam occaecati. Rerum cum minus voluptate. Expedita quidem explicabo ratione accusantium sed pariatur. Porro sequi deleniti totam ipsum animi. Delectus corporis aliquam. Occaecati iure eaque quas velit eligendi. Iste esse velit. Quos laborum porro consectetur accusamus excepturi maiores accusantium occaecati. At velit hic dicta esse aliquam iusto. Assumenda non quos ducimus. Quis nobis architecto libero aliquid. Veritatis maiores culpa earum. Eligendi explicabo nemo illum nulla numquam. Quia consequuntur quo dignissimos itaque tempora repellendus architecto odio. Excepturi labore harum magnam eligendi quam accusamus. Pariatur possimus incidunt placeat sit ipsum possimus optio saepe. Consequuntur aut laudantium iste quos eligendi cupiditate ab eius. Iure placeat molestiae facere dolores neque. Eaque cupiditate enim a corporis numquam commodi vero natus. Recusandae labore commodi sequi et. Veritatis eum est enim. Hic inventore accusantium molestiae magni omnis. Esse soluta consequatur ipsam sunt nulla. Ea error dolorem optio. Corrupti quo veritatis ducimus ipsam eius sed fuga. Debitis laudantium vero aut amet.

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