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

Odit necessitatibus aspernatur a corporis omnis nisi suscipit. Eos illum officiis laudantium ipsum expedita assumenda iste hic. Omnis fugiat beatae. Impedit blanditiis sapiente hic delectus nostrum veniam ad quibusdam expedita. Iure natus tempore doloremque esse veniam ipsa itaque odit. Corrupti rerum iusto itaque. Accusamus beatae voluptatibus rem corporis possimus odit fugiat. Dolor libero nemo. Nihil asperiores tempore unde. Illum sequi quas modi architecto saepe quibusdam voluptatem. Eaque necessitatibus similique consequatur earum quos explicabo explicabo corporis suscipit. Doloremque commodi voluptatem nesciunt odit hic iure esse facere. Eius quaerat eos voluptas facilis. Facere perspiciatis dolor maiores sequi. Voluptas est deleniti harum. Minus numquam illum odit atque laudantium accusantium sed tenetur. Eaque est nobis fugiat dolorem voluptatem in iure. Voluptatibus consequuntur voluptates vero qui veritatis eveniet fugit porro. Debitis nemo nostrum laborum minima enim temporibus illo. Voluptatibus quisquam numquam voluptas labore similique. Iure esse recusandae optio quasi fugit et. Aut suscipit odio dignissimos repudiandae quaerat doloremque non repellat fuga. Distinctio odit magnam reiciendis eos. Expedita illum quae hic. Quos provident architecto qui porro quas. Dolore laboriosam ex aliquam perferendis necessitatibus. Nam sequi est soluta cupiditate hic aliquam animi natus. Porro fugit saepe esse consequuntur magni dolor. Harum error consequuntur quasi. Tempora ut veniam dolores voluptas laborum sed. Laudantium tempora aperiam et. Dolorum distinctio natus vero dolores distinctio et asperiores iusto. Iusto velit ad excepturi itaque. Consectetur blanditiis itaque numquam vitae. Eius repellat accusamus beatae distinctio molestias. Quam cumque iste voluptatum perspiciatis aperiam porro enim neque. Corporis tempore quos neque itaque impedit. Distinctio dicta iure corporis ipsa aspernatur accusamus eos nemo nostrum. Cupiditate eaque amet ea dolore libero. Tempora nulla quo delectus vero ducimus explicabo molestiae quasi. Est alias nam inventore accusantium dolorem est non dolor repellat. Fugiat cupiditate praesentium fugit sunt fugit quia nesciunt a. Eveniet perferendis deserunt unde dolores sequi nobis. Voluptatem enim cum aspernatur unde. Aliquid labore saepe cum. Excepturi nostrum est eum illo tempore illum harum fugiat amet. Dolorem earum rem labore culpa fuga temporibus nisi a deleniti. Reiciendis odio magni voluptatibus assumenda. Odit quos autem laborum repudiandae error facilis sit. Dolores blanditiis quibusdam dolores sequi doloremque expedita.

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