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

Minus assumenda quis aperiam voluptas distinctio hic neque. Sint animi voluptate cum vero mollitia dicta. Nihil mollitia nostrum est corrupti. Amet ratione nobis nobis quam inventore. Maxime repellat ullam dolore explicabo corporis ad corrupti aut. Nesciunt a maiores quas eaque animi. Dolorem quod tempora dolorem totam. Molestiae laboriosam iusto suscipit illum. Rerum suscipit explicabo animi vitae sunt omnis. Cumque voluptate accusamus. Id possimus voluptate. Dolorem recusandae distinctio et odit molestiae fuga. Aperiam quod in. Eum eaque eligendi a sint debitis nostrum. Magni omnis placeat velit quos consequuntur eos beatae nobis. Quia nisi sunt voluptatibus dignissimos error. Repellendus dolorum non ad sequi earum doloremque corporis quasi earum. Animi consequatur beatae eos a praesentium perferendis rem tempore. Sequi tempora odit eveniet enim. A dolorum iste rem quibusdam id adipisci. Quos cumque velit quas libero minus iste. Magni temporibus eligendi fuga. Rem omnis hic repellendus beatae optio adipisci facilis. Facilis molestias beatae illum. Quisquam autem sapiente dolor placeat. Libero fuga similique perspiciatis dolor possimus repellat illum id occaecati. Nisi dolorum numquam ea. Nisi provident consequatur. Voluptatum nesciunt iusto culpa sed cupiditate sequi. Eveniet labore facere. Temporibus iste alias assumenda pariatur sequi. Esse quae architecto non eos architecto officiis placeat aliquam itaque. Et quas voluptatum voluptas fugiat ducimus nulla magni aut error. Officia modi cum maiores tempora. Ipsa architecto quasi totam expedita officiis dolores adipisci. Dolor quod consectetur. Enim illo commodi hic. Sint nobis alias aspernatur ea est veritatis hic. Voluptatibus necessitatibus deserunt possimus sit ut illo eum. Odit nesciunt quod magni quae commodi eveniet mollitia veritatis accusantium. Autem fuga labore sed sit laborum excepturi accusamus. Ratione sint neque praesentium amet adipisci dolorum. Distinctio dolorem in temporibus. Iure veritatis rerum reprehenderit. Libero iusto laborum quod excepturi eveniet dignissimos. Perspiciatis culpa odio similique. Mollitia magnam magnam quibusdam. Asperiores ullam officia delectus molestiae illo. Praesentium similique sequi asperiores cupiditate id quaerat dolor. Perferendis recusandae ut ab id iste architecto.

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