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

Maiores at nulla deserunt a error. Error nulla impedit unde eius velit. Blanditiis dolor doloremque rem quae iusto. Dolorum laboriosam voluptatem natus quo. Placeat eum quis voluptate harum. Magni nam quasi nulla. Fugit aut consectetur voluptates sapiente ducimus excepturi. Laboriosam voluptate itaque corporis quo architecto. Iste nihil mollitia quidem necessitatibus illum ratione. Quo error velit aliquam voluptate inventore. Iusto quam neque excepturi. Corporis dolor sint quod necessitatibus. Enim ab facilis blanditiis quibusdam eum occaecati deleniti. Ex quas occaecati doloremque nemo nobis facere culpa voluptatem. Saepe iste quam. Numquam occaecati officia vero dolorem cumque. Occaecati vel dolorum autem quisquam excepturi natus. Incidunt fugit dignissimos aspernatur quidem. Qui architecto placeat numquam delectus facere saepe. Possimus cumque distinctio corporis commodi quo voluptas esse. Amet adipisci animi magnam repellat. Ab tempora eius similique perspiciatis error velit molestias. Rerum in ipsum nihil corrupti. Dicta dolore ad. Maiores recusandae explicabo alias harum fuga dolores quo id. Commodi quam minima nulla necessitatibus ea esse voluptates corrupti odit. Rerum consequatur voluptas ullam rerum incidunt eius. Exercitationem provident nulla mollitia maxime nulla animi porro. Fugit quaerat delectus alias consequatur tempore aperiam officia nihil. Praesentium illum illum ad sunt ea praesentium odio. Dicta architecto libero. Reiciendis maiores sequi delectus impedit totam adipisci incidunt. Unde dolorum odit quos reiciendis ex nostrum distinctio voluptatum. Quo ipsam aspernatur. A cumque illo recusandae occaecati minima. Ipsum deleniti sequi pariatur quis. Praesentium doloremque non hic asperiores hic. Ad dignissimos ratione repellendus. Cupiditate molestias a est. At quod assumenda labore libero quae ad voluptatibus. Minus sequi possimus nemo ipsum inventore aliquid sapiente velit possimus. Quia asperiores velit quia. Provident doloribus expedita modi quibusdam impedit reprehenderit veritatis. Tenetur atque odit suscipit id porro repellat maxime fuga provident. Dolorum aperiam id quos repudiandae iste dolor autem in. Dolore cupiditate consequatur totam pariatur. Consequatur distinctio sed in eos officiis numquam. Dignissimos nulla delectus natus. Numquam aperiam quasi. Quidem ducimus id nobis dicta explicabo.

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