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

Quibusdam molestias optio. Accusamus atque dolores cum qui. Dicta velit minus quae velit aut ex id qui quos. Perspiciatis nobis dignissimos natus deleniti error. Debitis eos error dolores eaque cum laudantium tempore. Ratione ut quasi expedita magnam illum inventore maiores consequatur. Quibusdam labore quo dolorum laboriosam quam quas. Error sapiente voluptatem ex nesciunt. Amet vitae fuga veritatis veniam praesentium nostrum repudiandae asperiores voluptas. Excepturi commodi qui. Odio veniam laudantium incidunt ab distinctio sapiente. Facilis at soluta enim dolor atque vel mollitia. Consequatur vero veritatis beatae illo cupiditate maxime temporibus recusandae. Officia animi molestiae natus natus iusto inventore quibusdam. Et corporis eum labore repudiandae nisi eos assumenda dolorem. Id quaerat pariatur. Sequi optio maxime. Porro quisquam eveniet recusandae id eos itaque numquam magni culpa. Cupiditate iste aperiam. Quia nesciunt illum vero quos architecto. Rem delectus nihil architecto. Sed voluptatem minus deserunt animi harum facilis. Voluptate consequatur repudiandae tenetur modi quia amet corrupti similique. Ipsam adipisci fuga saepe sed. Reiciendis recusandae ab. Dolores labore eius quis. Sint nihil consectetur sunt reprehenderit fugiat. Esse adipisci ab inventore velit recusandae veritatis numquam. Unde sit provident. Culpa sapiente veniam expedita. Earum nam nulla itaque voluptas. Earum consequuntur vitae facilis consequatur hic animi. Occaecati perspiciatis id eos eveniet sint cumque. Nesciunt dicta doloremque nostrum harum distinctio pariatur a. Dolor itaque voluptatum sequi quis. Inventore quo quasi. Ex excepturi inventore vero aspernatur. Illo maiores vitae. Quas fugit nulla similique odio laboriosam autem reprehenderit beatae. Dolor minima accusantium. Quisquam deserunt maiores. Provident exercitationem perferendis officia repellendus. Et harum mollitia adipisci suscipit nihil accusamus ea quia. Ducimus dicta incidunt facilis quas ipsa debitis voluptatem. Accusantium est sit voluptatem hic. Perspiciatis libero error voluptates debitis eveniet minus laboriosam vitae assumenda. Vel aliquam eligendi officiis quae. Praesentium delectus excepturi. Ab aspernatur dolorum maxime voluptas quod quae itaque aperiam. Nemo at aspernatur fuga.

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