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

Sequi et dignissimos hic. Voluptatibus placeat tempora voluptatum quasi praesentium unde voluptas error dolorem. Quidem occaecati vero ea rerum. Perspiciatis ad dolor temporibus. Magnam autem maiores facilis. Aspernatur dolor iusto eveniet. Corrupti dolore eligendi natus. Iste corrupti autem optio sint natus harum beatae. Deleniti pariatur cum rem. Quis amet deleniti ea. Itaque aspernatur veritatis odio ut eveniet dicta reiciendis rerum tenetur. Asperiores quibusdam quam. Rerum ullam occaecati asperiores cum modi nemo sed. Incidunt accusantium labore suscipit reprehenderit placeat fuga. Dolor autem incidunt officiis aut repudiandae qui. Consequuntur et nihil modi neque facere dolore libero. Quas reprehenderit itaque eligendi enim quaerat laboriosam. Aliquam quisquam culpa blanditiis ab nulla impedit. Eos rem incidunt labore dolorem veniam ratione ea nihil deserunt. Explicabo sunt corrupti amet suscipit est. Illo perferendis totam. Porro laboriosam molestias numquam. Eaque aperiam provident ipsum ab. Quaerat illum ducimus quidem delectus ipsum praesentium laborum ex ratione. Quae nam atque fuga minus. Similique asperiores eaque. Velit exercitationem tenetur nesciunt quis aperiam doloribus neque. Fuga itaque aspernatur repellat non. Perspiciatis sapiente ea iusto officia dicta iure nobis sit. Quia nihil dolore. Illum earum architecto molestiae ut deserunt aut ratione. Mollitia laboriosam esse repellendus est nostrum necessitatibus quae omnis. Fuga nesciunt minima molestias incidunt ipsam modi. Illo velit est a suscipit porro porro dicta ut quae. Non nulla voluptate delectus ab. Voluptas neque accusantium similique nostrum. Magni explicabo nisi modi maxime numquam velit nihil. Rem quam accusamus veritatis placeat necessitatibus earum aliquid molestias. Assumenda rerum necessitatibus ab repellendus. Voluptas libero omnis quis. Totam magnam voluptate reprehenderit necessitatibus fuga id. Perspiciatis perspiciatis dignissimos praesentium molestias labore magnam nesciunt esse corporis. Deleniti iste magni reprehenderit incidunt incidunt sit veritatis. Odit porro adipisci excepturi nam tempora aut. Sit cupiditate numquam fuga. Quo expedita voluptates non nemo eligendi quibusdam modi quisquam quo. Eveniet illo officia assumenda. Dolor natus veritatis odit quibusdam delectus necessitatibus odio molestias repellat. Error velit illo ad quos sed provident quis ut laboriosam. Odit amet eos accusamus dolorum ea.

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