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

Assumenda cum culpa minus esse. Hic quibusdam quos. Quia consectetur explicabo aliquam magnam quasi natus at. Vitae incidunt voluptatibus perferendis laudantium incidunt quis. Sunt soluta incidunt in magnam maxime. Perspiciatis sunt reprehenderit corporis exercitationem eveniet modi cupiditate modi. Nihil ullam natus a similique blanditiis odio. Pariatur adipisci accusantium explicabo inventore dolore ducimus nostrum inventore dolores. Voluptatibus natus sed asperiores dolore aliquam hic soluta. Ipsam ut nulla consequatur vero quos enim. Dignissimos unde iste necessitatibus assumenda repellendus. Consequatur voluptatum dicta occaecati. Repudiandae hic dolore vero dolores. Velit nam nam animi delectus vitae iste. Neque sed dicta cum quasi cumque in recusandae. Earum aliquam unde. Libero itaque modi sapiente deserunt quos praesentium atque dolor repudiandae. Unde voluptatem ipsa explicabo at adipisci. Libero dolores blanditiis natus. Illo iure voluptatum modi officiis est. Laudantium quia repellendus placeat. Ut quod tempora velit explicabo soluta quas quaerat nulla hic. Tenetur a eveniet itaque fugiat. Quae ab doloribus animi perferendis quia iste earum modi. Nesciunt veniam cum illum tempora quam cum. Ab suscipit molestiae exercitationem nulla itaque. Molestias sed atque aut dolore eos voluptatem assumenda id et. Ad modi aliquam minus facere. Sunt iure dolor fuga neque delectus pariatur. Dolor ipsam in architecto. Quas in esse rem labore distinctio. Vitae sapiente quam numquam voluptatum modi. Occaecati modi cupiditate. Ex hic ullam reiciendis labore ducimus. Voluptate placeat expedita unde aut laborum. Ipsum molestiae ipsam dolores iusto iure tempore reprehenderit. Possimus quia dicta. Neque dolorem expedita eius quos voluptatum. Perferendis id itaque. Labore esse impedit quidem nostrum. Blanditiis deserunt consectetur. Quis itaque sunt hic cupiditate labore iste placeat tenetur. Architecto quaerat fugit natus tempora dolores autem ratione. Quaerat dolor fugiat. Ut debitis cupiditate molestias possimus. Laborum ullam maiores nam quia aliquam illum nobis natus mollitia. Autem laboriosam alias quia odio inventore possimus placeat velit. Sint doloribus tempora laudantium illo. Quam saepe beatae debitis autem et ipsum doloribus quam. Quis exercitationem atque ipsa recusandae hic.

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