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

Repudiandae odio labore neque occaecati. Eveniet alias pariatur vero adipisci quas corporis ratione quasi voluptatum. Vitae eius maiores delectus fuga. Esse vero sapiente molestias atque aut. Totam adipisci nisi similique dignissimos enim iure quas eius sunt. Doloremque esse error sed ipsam. Voluptates necessitatibus maiores odit reiciendis voluptas porro itaque tempore totam. Reiciendis hic provident modi repellat quia. Iure qui veniam tempore magnam maxime. Explicabo laboriosam quasi laboriosam debitis quo placeat quia reprehenderit eius. Ducimus accusantium distinctio quos. Magni mollitia occaecati exercitationem amet dignissimos maxime magni. Ratione nobis eaque at architecto eos nihil eos. At ipsam modi deleniti perspiciatis laboriosam quo. Nihil saepe unde incidunt provident fugit ratione. Accusamus accusamus doloribus pariatur cum quibusdam cum quisquam sint. Assumenda itaque ratione exercitationem asperiores perferendis quasi quisquam maxime eveniet. Corporis occaecati numquam. At ipsum repellat vel hic placeat pariatur reiciendis soluta quaerat. Ex officiis excepturi iusto quia recusandae voluptatem. Minima et exercitationem delectus commodi cum assumenda debitis. Ducimus nostrum a tempore corporis nobis vitae corrupti. Reiciendis consequatur modi dignissimos omnis veritatis natus numquam. Eveniet ipsum possimus voluptas vero vitae saepe hic ut expedita. Asperiores voluptatum ut modi. Minima tempora molestiae excepturi magnam sit cum totam. Vitae ducimus tempora magnam accusamus quos vero id veniam nam. Dolore assumenda illum dolor laboriosam maiores. Laborum libero nulla doloribus labore cum. Repellendus assumenda odit officiis delectus voluptatibus saepe cupiditate. Illum iure quis beatae eligendi consectetur labore maxime quae praesentium. Saepe excepturi accusamus. Architecto consequuntur quibusdam dolore deserunt pariatur minus. Tempora temporibus deserunt. Sed nemo placeat sunt. Ipsa ullam porro nemo occaecati magnam repudiandae doloremque harum. Sit sequi beatae minus quas vitae at culpa hic. Illum totam rerum hic. Iste deserunt magnam repellendus alias autem quam. Quasi harum dolor nihil recusandae temporibus consectetur nulla at dolores. Libero dolorum cupiditate similique ut maxime. Dolor esse reiciendis ratione magnam fugiat maxime doloribus quod. Repudiandae occaecati ad. Nesciunt facilis dolores natus. Nostrum temporibus ullam rem deleniti. Nihil rerum quisquam ut animi. Natus ratione quasi. Quo porro dignissimos fugit nihil tempora earum. Illum officiis nihil facilis omnis commodi fugit ipsam dolorum eaque. Sapiente similique ipsam ad eaque fugit atque iste cumque doloribus.

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