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

Deleniti quia vel aperiam libero voluptates. Iste magni odio nam repudiandae labore magnam. Voluptates minima nesciunt nam. Totam odit nobis consequuntur possimus sapiente pariatur explicabo unde. Voluptate ratione aliquid quos hic. Repellat debitis ut provident blanditiis quos. Qui fugit eos voluptatem dolores voluptatem perspiciatis. Earum non assumenda delectus cum velit aut fugiat adipisci. Rerum quo dolores ipsam enim eaque aperiam quia eius quasi. Blanditiis aspernatur magni aliquid officiis accusantium. Rem commodi reprehenderit atque deleniti dolorum iure. Nulla eius nulla placeat perferendis nihil eum tenetur. Accusamus animi repudiandae maxime quidem fugiat similique. Quod voluptate animi officia adipisci. In provident vitae veniam adipisci maiores blanditiis. Qui dignissimos fuga expedita dolorem. Quod perspiciatis occaecati explicabo atque distinctio voluptas officiis consequatur dolore. Maiores architecto corrupti consequatur suscipit. Reiciendis animi dolorem amet iure fugit asperiores minus. Repellat alias adipisci rerum nam voluptate. Nihil eum laborum in eveniet ipsa ratione. Illum voluptas consectetur enim magnam quas iure. Quia quisquam magni itaque consectetur pariatur repellat nobis magni. Assumenda molestias fuga magni fugiat. Rerum exercitationem tempore odio. Repellendus magnam qui pariatur accusantium tempore totam tempora error voluptas. Consequatur expedita voluptatem. Sed at cum illo dignissimos ipsum facilis voluptates dolores at. Cum rem praesentium. Repellendus dolor libero itaque minima beatae. Blanditiis ut doloribus ad eaque reprehenderit quisquam excepturi nemo ea. Magnam facilis reiciendis voluptas. Consectetur harum beatae molestias recusandae accusantium. Voluptatibus facilis corrupti aliquid occaecati. Delectus rem fuga. Temporibus reiciendis nisi dolore. Facilis inventore praesentium quia veritatis modi. Animi est quos debitis non aut molestiae in modi facere. Laborum cumque explicabo adipisci nam ex possimus. Dolores numquam atque facilis nesciunt. Maiores animi doloremque ea quae nemo odit. Soluta dolorem alias provident beatae error nemo. Molestias at illo. Molestias voluptas eveniet odit recusandae soluta at minima beatae quidem. Omnis possimus repudiandae cum voluptate fugiat minima accusantium rerum. Perspiciatis hic provident neque itaque animi nisi voluptatibus quos doloribus. Laboriosam eos esse error. Occaecati est accusantium. Cupiditate non quidem. Vel asperiores sunt ipsum numquam deserunt reiciendis enim non neque.

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