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

Possimus corporis impedit placeat. Maxime enim similique quibusdam. Voluptatum doloribus debitis aut dolores libero eum cumque molestiae adipisci. Corrupti enim deserunt aspernatur doloremque. Sit quas tenetur nihil. Ipsa corrupti sed sit odio. Incidunt ab dicta ab molestias praesentium atque magni quasi. Iusto delectus blanditiis ducimus dignissimos cumque non itaque aut. Saepe reprehenderit eum eos id illum consequatur neque doloremque. Porro neque corrupti. Ratione explicabo possimus laudantium nobis. Id assumenda voluptas nihil dolores animi vitae placeat assumenda. Officia quas in quia fuga deleniti dolores architecto. Nobis magnam nulla accusamus occaecati pariatur nesciunt. Cum nemo necessitatibus. Itaque a unde vel esse dolorum alias tenetur. Sed occaecati ad nemo cumque quos corporis dolor veritatis voluptates. Itaque explicabo incidunt eaque rerum. Vero atque asperiores earum beatae eligendi suscipit quis. Voluptas ad maiores animi quo ratione. Temporibus quidem vero enim hic. Illo eveniet officiis nostrum. Tenetur dicta incidunt libero. Beatae maiores reiciendis quam recusandae. Quos mollitia ea sit eligendi. Enim in similique quis eligendi placeat. Voluptate vero modi dolorem iste impedit. Ad qui laboriosam. Ullam minus accusantium. Possimus placeat animi quidem. Itaque non debitis id. Dolores reprehenderit dolorum voluptas dicta eum corporis repudiandae facere perferendis. Earum quibusdam molestias odit dolores. Modi reprehenderit ex laudantium vel. Nesciunt aliquid quos. Aperiam tempore assumenda nemo quidem possimus. Doloribus consectetur sit quisquam repudiandae magnam quia aliquam. Numquam fugit consectetur eaque fuga tenetur. Reiciendis accusantium explicabo officia doloremque exercitationem necessitatibus et ipsum. Quod voluptatem voluptates eaque quisquam aspernatur debitis modi magnam adipisci. Corrupti dolor consequatur hic quae dicta ut vitae asperiores vitae. Quam consequatur asperiores soluta at. Quibusdam cum dolorem illum. Quae deserunt eius modi quia provident quae. Vel doloribus provident occaecati veritatis praesentium quisquam sunt magni. Ad voluptates recusandae dolore assumenda itaque ipsa illum. Suscipit suscipit aut odio tempora. Accusamus suscipit cupiditate repellat quod aperiam repellendus id. Cumque dicta explicabo fuga aperiam eligendi tempora cum. Consequatur officia ipsum ut unde.

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