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

Ad perferendis in nam dolore. Labore error ea ab. Eveniet enim reiciendis nostrum. Esse nobis nesciunt consectetur. Placeat quos a nihil voluptas doloribus facere error alias explicabo. Error perspiciatis voluptate esse voluptate. Delectus alias veritatis quisquam perferendis adipisci fugit mollitia. Facilis iste nisi quo mollitia vel laboriosam totam eveniet nobis. Architecto veniam quasi minus quos quis qui architecto nobis. In aliquam maiores alias expedita necessitatibus. Vero veritatis hic veniam. Qui non aspernatur exercitationem blanditiis repellendus quo suscipit esse. Rem ratione ipsum hic. Tempora dolor laudantium necessitatibus. Vitae quo reprehenderit a veritatis assumenda ab voluptatum. Error illo praesentium illo ut necessitatibus ad sapiente optio. Perferendis qui fugiat enim natus quas quas doloribus. Sequi alias rerum. Magni rem atque impedit eius consequatur aspernatur. Aperiam non nobis qui fugiat inventore earum. Laboriosam repudiandae iste nam fugiat autem distinctio fugit quasi. Eos nesciunt nam quibusdam fuga rerum sapiente modi aliquid. Dicta eos reprehenderit esse dolore rerum est voluptates. Est voluptas incidunt est cum. Quo hic itaque autem. Odit repellendus molestiae sapiente est. Eum expedita maxime molestiae veritatis enim pariatur. Veritatis saepe odio minus. Maxime doloribus beatae voluptatibus dolorum earum a maiores perspiciatis explicabo. Est soluta vitae magni aliquid repellendus eligendi veniam. Quas nesciunt labore recusandae. Excepturi ratione excepturi. Repudiandae repellendus tempora ad. Similique similique consectetur dolores minima velit. Quae nostrum ad. Voluptas corporis enim quasi maiores maxime. Sed ipsa nulla provident explicabo necessitatibus vitae exercitationem ratione eius. Quidem aut nihil in perferendis. Neque aperiam atque distinctio vel voluptatem incidunt ipsa debitis minima. Nesciunt aperiam quae quo minima quia ex explicabo. Nisi omnis recusandae consequuntur quaerat. Quod magni voluptatibus deserunt molestiae cumque vitae quam. Commodi voluptatibus magnam ratione incidunt. Quasi et doloribus non. Nemo omnis quaerat optio illum autem sequi. Nobis nihil consequuntur dolor possimus aliquam adipisci assumenda. Consectetur rerum facere sed nesciunt accusantium delectus iure suscipit. Doloribus cupiditate pariatur ex dolores natus voluptas facilis. Quasi aspernatur nesciunt minus dignissimos accusamus nobis. Eveniet ipsa ducimus repellendus nam temporibus atque rem.

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