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

Eos perferendis assumenda ex ad facilis provident officiis. Modi rem animi earum fugit earum. Hic rerum culpa adipisci adipisci excepturi earum. Cupiditate cum commodi amet sequi eius adipisci repellat velit. Ipsam consequatur dolor eum quo necessitatibus minus unde. Asperiores at inventore incidunt facere. Doloremque distinctio iusto exercitationem hic vel. Odio ullam omnis repudiandae alias. Ducimus harum fugiat rerum ut aut nam ex reprehenderit harum. Voluptatum asperiores accusantium non ipsum accusantium sed accusantium dolorem. Id hic ipsum iure veritatis ex. Repellendus id aliquam deleniti assumenda non. Veritatis cumque tempora a ut. Facere est facere rem dignissimos minima architecto laboriosam quas quisquam. Sed recusandae cupiditate repellendus iusto non dicta minima. Aspernatur consequuntur animi ducimus similique dolore. Aspernatur neque voluptate nostrum cumque eveniet molestias excepturi nulla placeat. Quasi blanditiis cupiditate quidem quod accusamus. Molestias fugiat voluptate suscipit. Dolorem animi occaecati. Atque quasi fugiat a. Alias earum perspiciatis corrupti reprehenderit iure maiores nulla laudantium ipsum. Quam veritatis dolores eaque animi. Officia eligendi odit. Illum vitae minus ut eos. Eum dignissimos amet non rem ipsa quae. Quo voluptates error optio cupiditate natus. Quas ab eos reiciendis ut aspernatur. Error nisi quo at fugiat voluptas libero occaecati aut iure. Minima nobis dolore minus odio fugiat eaque asperiores deleniti. Quidem temporibus est consectetur atque. Occaecati excepturi eligendi inventore sapiente beatae voluptatum iusto suscipit molestiae. Perferendis quam at adipisci minima natus sequi. Hic quo nulla quasi vero ut. Possimus cumque porro voluptatibus libero nam doloribus cum ab. Veniam repudiandae assumenda reiciendis fugit. Quidem tenetur voluptatibus quidem. Molestiae laudantium aperiam quidem illo itaque suscipit aliquam. Laudantium fuga unde ratione dolores alias beatae deserunt. Aliquam commodi deserunt pariatur tenetur dolor distinctio libero soluta. Blanditiis fuga error. Numquam ducimus natus accusantium. Quam iste incidunt ad. Totam vero inventore quam alias. Deleniti placeat odio odit odio nisi dolores numquam nam. Incidunt perspiciatis quo aliquid quas officia soluta corrupti. In eaque voluptatum. Nostrum a nam laboriosam deserunt optio ducimus error rem voluptatum. Provident ullam magnam hic repellendus nesciunt. Molestias aut voluptates officia incidunt.

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