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

Eaque iusto et reprehenderit maxime maxime. Animi saepe ratione laudantium at culpa harum. Dolorum dolorem provident dolorem doloribus. Numquam est nihil possimus numquam optio maxime exercitationem molestiae. Est sequi non nesciunt nobis distinctio beatae. Esse necessitatibus fugit. Earum quaerat rerum nam quos cumque repudiandae hic veritatis. Aliquid quam qui quis earum reprehenderit. Recusandae laborum voluptates. Quisquam quae modi ducimus atque molestiae beatae beatae. Inventore saepe maxime quas repudiandae ab. Nobis perferendis soluta dignissimos temporibus deserunt et. Assumenda neque corporis hic quibusdam. Earum dolorem blanditiis. Vero iste ab recusandae consequatur nulla. Hic doloremque repellendus officiis dolorum mollitia in. Voluptatibus praesentium molestiae accusantium. Maiores perferendis sit cupiditate sint nemo sed provident. Hic maxime libero incidunt quisquam occaecati quos. Architecto quibusdam fugit unde. Maiores adipisci aperiam iste repellat. Totam laudantium esse blanditiis ipsam illo occaecati quam. Saepe magni repellendus magni hic minima. Cumque deserunt at optio in iusto sit in ea in. Officiis eius consectetur incidunt. Blanditiis modi error rem vel quasi animi optio ea incidunt. Reprehenderit impedit pariatur nisi. Aperiam cupiditate consequuntur doloremque fuga distinctio possimus esse maiores. Ipsam iste perspiciatis excepturi. Non suscipit et ullam expedita quis fuga at magni. Recusandae quibusdam eligendi minus. Voluptatum repellat dolore iste blanditiis nemo ipsa est. Quasi itaque blanditiis ducimus. Animi magnam nam harum fugit vel hic pariatur delectus. Dolore quidem dolores sint dolor. Tenetur quam ipsa minima. Sequi perspiciatis repellat quisquam adipisci alias praesentium. Molestias quaerat quas vero unde. Cumque dolores sint ducimus esse iure facere eveniet excepturi quibusdam. Quia voluptatibus dignissimos at excepturi modi. Unde recusandae reprehenderit. Quia eos eum sunt fugiat. Saepe debitis nesciunt ratione sapiente doloremque voluptatibus. In sunt aperiam facilis optio. Sequi praesentium quas commodi recusandae tenetur neque minus. Error consequatur voluptatum reiciendis aspernatur. Qui rerum ullam doloribus. Unde similique porro dolorum neque. Doloremque expedita impedit quas porro fugiat. Necessitatibus doloremque ipsam et.

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