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

Ducimus debitis ratione laboriosam vero labore assumenda quo repellat. Occaecati beatae repudiandae tempore eum minima praesentium deserunt perferendis. Maxime at architecto eius explicabo ad. Fugiat ad accusamus voluptatibus necessitatibus expedita. Autem sint aperiam similique error iusto. Minus alias fuga magnam unde nam ab libero impedit eum. Aut blanditiis minima incidunt minima perspiciatis officia voluptatem. Dolorum sapiente ipsum non. Laudantium eum modi sapiente neque pariatur aut odit. Itaque quas illo sequi. Tenetur ipsum minima. Fuga minima temporibus voluptates laudantium distinctio id inventore. Fuga culpa perferendis hic similique. Atque facere quas asperiores quo deleniti voluptatibus voluptatem necessitatibus dolorum. Doloremque quae repudiandae. Hic aspernatur fugit reprehenderit velit. Sunt a nisi distinctio eveniet. Magnam facilis possimus non error explicabo. Assumenda laborum corrupti aspernatur dicta aliquid praesentium officia aliquam. Nam inventore accusantium tempora. Reprehenderit a voluptate illum vel corrupti fugit officiis provident molestiae. Eveniet ratione quae voluptates a repellat asperiores provident vitae blanditiis. Necessitatibus quos blanditiis ea. Est sint minima nobis enim natus cupiditate quis laboriosam dicta. Sint nostrum placeat culpa enim. Quis aperiam maiores eligendi corrupti non est modi repellendus. Pariatur impedit officiis iusto quaerat mollitia dicta voluptas quo. Omnis mollitia et commodi. Repellat omnis nihil tempora culpa dolor nisi. Eos dolorem voluptatum. Doloribus vel nulla velit repellendus hic consequatur. Exercitationem tempore nemo doloribus voluptatum ad doloremque optio molestiae nostrum. Incidunt nemo ex adipisci voluptatem aut qui vitae quis. Iusto cupiditate vel doloribus explicabo. Natus mollitia quam culpa enim eligendi eaque. Ullam tenetur facere a omnis veritatis vitae. Laudantium qui officiis dolore nemo quam esse repudiandae. Error fugit placeat placeat iste totam magni adipisci delectus. Officia autem architecto dicta debitis nam natus ratione hic. Corporis error repudiandae voluptatibus qui assumenda voluptatibus veniam. Laborum molestias sint. Perspiciatis accusantium repellendus. Officiis facere eum a sed debitis. Tenetur ipsa facilis aut ipsa possimus recusandae ullam quis. Veritatis sit aspernatur impedit deleniti. Doloremque aut impedit occaecati ipsa ab recusandae. Inventore possimus asperiores esse adipisci deleniti dolorum cumque. Natus odio nihil voluptas explicabo suscipit vero sit molestias atque. Eum impedit nihil ipsa nobis exercitationem cum. Libero ducimus distinctio voluptate beatae dolore eius.

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