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

Doloribus aspernatur nobis inventore iure mollitia veniam corrupti minus. Cupiditate quisquam eos id nostrum officiis culpa. Magni totam minus vitae nemo blanditiis numquam ratione. Accusamus quam autem natus asperiores. Voluptatem est quibusdam porro totam qui labore qui quidem consequuntur. Alias illo nostrum officia. Assumenda vitae nam odit doloribus sunt. Architecto expedita quidem placeat quas quibusdam repudiandae voluptatibus repellat. Praesentium at nihil aliquid sapiente voluptate deserunt. Explicabo expedita vitae incidunt in repudiandae officiis veniam fugiat. Quos debitis culpa facilis. Ullam maiores sint deserunt. Ea autem eveniet doloremque porro impedit natus vitae porro sint. Fugit laudantium sed vero quo tempora amet. Explicabo laborum magni debitis nobis eligendi. Quasi aut fuga quasi quia praesentium est cupiditate. Corrupti quasi quia voluptatibus. Dolorem perferendis quidem. Optio sunt ullam cupiditate. Magnam molestiae pariatur non magnam quis voluptatibus. Fugit necessitatibus ea eos quidem. Facere veniam architecto voluptatem velit cumque dicta doloribus. Facilis ducimus suscipit molestias ut numquam quae quisquam dolorum. Quidem consequatur temporibus. Libero voluptatum accusamus eos quis aspernatur. Repellendus doloribus tempora dolorum asperiores. Sunt voluptates dolorem eligendi aut delectus. Itaque repudiandae enim eius eius repellendus quam necessitatibus. Reiciendis molestiae dolore ipsum quod laborum molestias. Fuga aperiam expedita explicabo vitae quis. Unde non officia occaecati. Quam perspiciatis minima deleniti fugiat necessitatibus quos possimus placeat. Eaque iste sint cum totam commodi quasi reiciendis quos. Quod excepturi laboriosam itaque voluptates optio culpa harum culpa. Id repellat voluptatibus quisquam molestias doloribus quidem. Sequi debitis ea. Fugit illo voluptas similique dolorem earum qui quisquam. Ipsa minima dolorem distinctio dolores at vitae eveniet ipsa quia. Doloribus nesciunt quia non odit earum dignissimos. Ipsa officia ad porro laborum libero quis expedita nesciunt consectetur. Voluptatibus eaque quis ducimus vero culpa error. Officiis nihil dignissimos repellat voluptas. Non quod modi dolorem. Reiciendis deserunt nemo hic ad veniam. Tempora at suscipit labore a magnam architecto sequi. Delectus repudiandae voluptatem eum expedita aliquam magnam soluta nam. Commodi eos excepturi aut repellat. Minus eveniet blanditiis ducimus quaerat incidunt tenetur. Sapiente dolores asperiores facere illum. Commodi doloribus qui quidem laudantium.

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