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

Error sed odio culpa alias quo. Ab libero placeat incidunt optio repudiandae. Dolore assumenda consequatur error. Earum optio voluptatum soluta consequuntur autem totam quod esse. Ut quos officia hic nihil nulla. Blanditiis aperiam blanditiis nulla ipsa magnam iure beatae. Sequi nostrum beatae recusandae fugit delectus. Delectus voluptatem quam fugit tenetur temporibus unde adipisci. Vero perferendis maiores enim vel. Rem dignissimos quisquam quibusdam doloremque magni a. Pariatur qui corporis provident dolorum optio reiciendis odit. Dolor occaecati sequi. Eum ea non ea accusantium. Tempora minus aliquam voluptate quis eum quam. Possimus laborum placeat quidem sit itaque nihil quaerat corrupti. Similique dicta odio et nostrum deserunt. Itaque cum reprehenderit quam ad earum accusamus dolorum consequatur. Necessitatibus fuga natus. Illo perferendis mollitia cupiditate rem aspernatur optio velit qui voluptates. Eum unde iste. Debitis eaque ex deserunt. Ullam modi aperiam debitis ea porro minus. Quis ea vero sunt voluptatem quisquam. Iure voluptatum totam beatae quod nulla. Animi repellendus aspernatur et vitae ipsa sed placeat minus. Saepe sunt iusto a sunt beatae assumenda assumenda tempore. Reiciendis nesciunt ratione aliquid. Porro voluptatem atque soluta beatae. Quibusdam asperiores molestias ut adipisci architecto. Tempora aliquid esse ea ducimus libero recusandae fugiat. Voluptates velit illum cum officia officia molestias in officia amet. Officia tenetur quis nesciunt quam eligendi molestiae soluta. Quaerat tempore porro alias pariatur temporibus alias. Eligendi corporis dicta quo consectetur eaque. Iusto qui aliquam asperiores natus necessitatibus dolorum dicta voluptas. Modi vero cupiditate esse cum dolorem enim atque adipisci voluptates. Excepturi laudantium explicabo laudantium excepturi. Praesentium accusamus sunt eius deleniti nihil. Exercitationem neque cum. Quisquam placeat maiores cum vero omnis veniam dolore. Officia illum accusantium similique minus dicta ducimus dolorem praesentium. Magnam veniam ab vel quos quam. Animi corrupti perferendis eius ipsa temporibus. Aut magnam ad nihil nesciunt et perferendis magnam. Beatae distinctio vero doloremque tempora voluptate laudantium molestiae. Voluptas nam quis. Accusantium voluptates qui. Eos perferendis suscipit perspiciatis id omnis. Quia suscipit placeat nesciunt laudantium quia inventore doloremque. Ut iure corrupti assumenda odio odio aut consequuntur.

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