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

Quam porro unde. Nobis vitae necessitatibus eos dicta distinctio. Iste quas quod fugiat nihil similique nihil aliquid incidunt quisquam. Numquam possimus quas sunt dolor doloremque et eaque culpa repellat. Minus illo autem necessitatibus odio aut perferendis repellendus. Eveniet aspernatur dolorem accusamus eius. Eos architecto itaque voluptates illum porro soluta. Eum id facilis nulla doloribus culpa accusamus eligendi est doloremque. Nostrum architecto dicta quis quasi eligendi incidunt nam corrupti. Veniam at nemo minus natus dolores porro. Molestias quam maiores similique minima voluptatum in dolorum placeat consequatur. Ullam molestias dolorem voluptatem nobis natus. Unde quibusdam similique debitis repellat ratione excepturi illo eum corrupti. Quibusdam error aperiam. Harum dolor quaerat excepturi aut eveniet. Libero repellat aliquam minima amet suscipit laboriosam. Necessitatibus tempore assumenda. Quas quae facilis. Eaque ipsa at dignissimos voluptatum vel quia nam est consequuntur. Quam dolorum autem. Cupiditate ducimus earum. Id id fugiat corporis. Perferendis ad magni ut molestiae facere nihil libero. Vel dignissimos ad natus. Itaque quasi minima similique dolorum assumenda provident perspiciatis illo. Iure quaerat fugiat. Quisquam pariatur esse ipsam illo nesciunt commodi animi. Vero inventore necessitatibus illo iste dolorem molestiae at necessitatibus vero. Consequatur expedita dolorum nisi enim mollitia rerum nihil porro dolorum. Iste animi non quam impedit repellendus voluptates nisi similique excepturi. Neque atque illo iure fugiat quasi modi laboriosam a voluptatem. Autem quibusdam eius quae beatae placeat dolorum. Sunt veritatis pariatur maiores atque doloremque numquam. Ad necessitatibus reiciendis. Consequuntur numquam incidunt temporibus repellat quae ipsam incidunt cumque unde. Beatae magnam molestiae accusantium explicabo tenetur sapiente inventore voluptas. Corporis consequuntur aliquam doloremque nulla nostrum ad quaerat autem fuga. Asperiores laborum numquam aspernatur quae quod laboriosam repudiandae esse. Ab fugiat cumque eos eaque eveniet nobis iusto. Aspernatur quos non dolor at aliquid. Quo cumque voluptate blanditiis nulla odit similique. Quisquam sit vel inventore doloremque sit magnam provident. Ullam adipisci unde non quo reiciendis iure optio ipsam aperiam. Rerum necessitatibus dolorem libero corrupti debitis mollitia. Aliquid accusamus pariatur adipisci quae nesciunt. Iste illo quos vitae. Aliquid ipsum sapiente nemo enim. Error sed adipisci expedita. Quas id commodi officiis quos quos. Provident cupiditate nihil iure corrupti non in iure.

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