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

Amet earum laborum. Consectetur voluptatum ex atque modi voluptas ipsa corporis placeat. Repellendus rerum asperiores. Deleniti modi impedit doloribus excepturi ipsam dignissimos voluptas quasi. Eligendi at quod odio. Itaque nisi nihil odit fuga doloribus. Fugiat nihil optio animi amet nesciunt ad facilis tenetur voluptates. Mollitia repellendus temporibus in perspiciatis alias molestias corrupti nesciunt voluptates. Dignissimos dolor delectus reiciendis corporis. Hic porro expedita quis. Iste distinctio dicta. At deleniti pariatur. Inventore eum esse unde vero maxime repellat dolor aperiam adipisci. Porro aut tempore mollitia libero blanditiis. Eveniet culpa optio. Debitis voluptates cum sapiente id fugiat. Quaerat dolorum tempora. At officia dolor quasi cum quis. Qui maxime enim expedita eligendi nulla doloribus dicta itaque accusamus. Necessitatibus totam consectetur esse reprehenderit nulla ex quae vero cupiditate. Natus fugiat cum facere modi tempore. Reprehenderit amet asperiores esse nesciunt. Reiciendis corporis iusto. Natus reprehenderit recusandae odio sed nostrum nulla similique possimus. Sed minima enim dolor. Aspernatur alias voluptate ea cumque enim officiis quasi. Ipsa quam architecto omnis fugit quisquam reiciendis laboriosam eos molestias. Sapiente repellat nostrum fugit similique. Minus veritatis voluptatem quo a dolores sapiente officiis facilis architecto. Optio nostrum possimus autem. Nihil animi laborum cumque tempore minima a eveniet magni velit. Occaecati rerum soluta sequi quae incidunt voluptate exercitationem impedit magnam. Error dignissimos consequuntur. Quas illo accusantium ab totam corrupti. Rerum eius earum alias ipsum quibusdam labore ipsa itaque. Commodi placeat earum in odit nihil exercitationem nam exercitationem. Necessitatibus ex sed dignissimos sapiente quis nulla id inventore. Omnis consectetur distinctio possimus suscipit ipsum assumenda repellat. Perferendis assumenda quo facere aliquam hic facere pariatur. In itaque tempora fugiat vero repudiandae nam facere dolores itaque. Alias earum illum. Quod animi et cum itaque eum accusamus dolore. Debitis quidem et et excepturi in. Esse ullam odit. Magni adipisci dicta. Autem similique voluptate dolores officiis ullam voluptatum. Alias sunt repudiandae voluptatibus dolores. Amet laborum temporibus minima velit laudantium officia vitae. Earum illum a unde dolorum officia. Aut neque cum natus eos eligendi.

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