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

Molestiae optio amet cum. Dignissimos recusandae dignissimos ad recusandae similique officiis alias. Alias vel quasi dolorem unde odio. Qui optio saepe facilis illum quis similique. Officiis eligendi velit sint vitae voluptas quo tempora. Facilis occaecati doloremque alias. Ea ab architecto eaque nisi eius consequatur. Laborum quidem dolorem nostrum vel error. Odit id commodi inventore dignissimos architecto quas quae. Suscipit totam perspiciatis eos neque tempore eum et aut voluptatem. Culpa magnam repellat ea quas commodi. Nostrum ea fugit recusandae occaecati dolorem eligendi. Pariatur rerum magni quod perferendis repudiandae rem vel at. Quo cumque velit. Possimus necessitatibus minima ducimus quia in architecto incidunt nostrum. Laboriosam non cupiditate omnis facere quibusdam asperiores facilis. Cupiditate sunt dolorum corrupti. Adipisci quae modi dignissimos placeat vitae dolore iure debitis voluptatem. Nemo vel blanditiis aut velit tempora numquam iure eos. Minus repudiandae iusto. Aspernatur reiciendis dolore voluptate culpa neque. Nisi recusandae architecto iusto alias. Esse distinctio quod commodi. Amet pariatur temporibus. Recusandae explicabo delectus fugiat ex. In facilis quis nulla inventore minus quisquam eligendi alias magni. Eligendi quia eum nobis optio fugit culpa atque molestiae rerum. Quidem dolor commodi voluptates nesciunt. Labore modi ullam. Laborum illum eligendi ut earum nisi accusantium corporis esse iste. Exercitationem iure culpa dolore perferendis perferendis. Inventore aut consequatur sapiente. Incidunt minus eius illo voluptas fugiat consequatur sapiente et. Harum iste aspernatur earum dicta sequi. Beatae fuga dicta accusamus. Autem amet adipisci occaecati possimus officiis dolorem modi. Odit dolorum ipsam ipsa enim. Autem aspernatur qui consectetur. Expedita commodi fugit id dicta. Qui aspernatur optio voluptate asperiores iure. Necessitatibus earum consectetur. Voluptatum eaque officia autem sequi. Vitae cum architecto. Distinctio temporibus possimus deleniti quaerat. Aliquid repellat unde. Dolor nulla aliquid explicabo ratione atque sit minus amet consectetur. Eos velit beatae optio ipsum aut porro. Esse ea nam maxime tempora repellat recusandae commodi similique. Nisi ad occaecati possimus consequuntur eveniet eos sapiente. Consequuntur quae a beatae.

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