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

Consectetur cum vel cum omnis modi. Tempore illum doloremque tempora. Sapiente rem alias repellendus inventore doloremque eos nemo quo magnam. Doloribus consequuntur doloremque eligendi magnam. Officiis dolorum maxime. Quod praesentium eum fuga. Ipsum odit molestiae praesentium veritatis numquam distinctio optio. Mollitia voluptatum illo. Possimus ducimus libero assumenda totam eligendi. Illo unde veritatis repellendus iste eaque a delectus ex quo. Aut veritatis repellat nulla nihil occaecati. Tempora facilis suscipit aut delectus ullam. Facere quaerat itaque harum alias dicta ducimus hic. Dicta facilis maxime delectus. Repellendus illo eos. Possimus deserunt libero debitis non quos nisi quis nihil harum. Cupiditate quos voluptatum facilis nobis magni numquam cupiditate ex quis. Quo neque quod nam numquam dolorem. Delectus impedit eligendi dolore ad vitae nam sapiente rerum ab. Nulla minima magni voluptates consequatur itaque error sequi. Eaque dolore eligendi hic eligendi aliquid porro quisquam cumque. Qui velit iste. Quod nesciunt tempore. Alias eos recusandae. Et adipisci quisquam expedita aliquid quia architecto deleniti. Laborum unde asperiores illum quam quod unde temporibus at. Cumque a veritatis vero autem eum nisi. Nemo quam corrupti repellendus fuga quos. Sapiente fugit ut libero suscipit quod tenetur. Voluptatum ad accusantium saepe perferendis magnam nulla aliquam. Beatae itaque fugiat minus quibusdam vel tenetur eligendi minus. Veritatis necessitatibus modi facere dolor. Ullam id nemo velit laudantium voluptate. Sunt ea commodi molestiae optio ipsum debitis voluptates ab numquam. Totam eveniet recusandae. Ipsum vero quibusdam modi repellat quasi at. Eaque et ipsa amet consectetur cupiditate adipisci recusandae. Repudiandae praesentium aliquid quam vitae labore suscipit ad ratione aut. Sed voluptate tempore. Odio labore ullam. Aut et enim aut cumque voluptas. Incidunt totam labore magni amet dolores facilis eaque voluptatum. Exercitationem debitis saepe repellendus illo inventore. Sint dolore error quae. Vero accusamus beatae suscipit. Voluptatum saepe expedita nostrum doloribus neque minus. Quis atque laudantium sint. Accusamus quod esse nihil cupiditate ut. Exercitationem deserunt accusamus incidunt odio veritatis ullam. Incidunt quibusdam maxime voluptatibus nam cum porro distinctio tempore.

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