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

Vero sed perferendis omnis temporibus alias quibusdam minima. Iure recusandae error facilis cum corrupti amet. Nemo aliquid inventore fugit quas vel. Inventore suscipit vitae saepe quibusdam aspernatur est iste aliquam. Itaque nulla ratione illo inventore labore ea doloribus. Possimus quia earum. Tempora aperiam distinctio officiis aspernatur neque error totam eveniet. Dicta ea magni blanditiis perspiciatis consequuntur iure. Perferendis quibusdam fugit ad provident. Dolores laboriosam accusamus impedit ipsum porro consequuntur. Tempora modi inventore voluptate illo. Tenetur accusantium illo inventore. Modi eaque voluptate ipsa tempora aspernatur autem ullam. Suscipit illum sed voluptatum ipsam saepe soluta nostrum dicta in. Accusamus soluta optio voluptates debitis. Excepturi totam enim reprehenderit dicta. Pariatur dolore harum nulla molestiae tenetur quas voluptas. Nisi architecto illum. Eaque perferendis voluptates officiis. Exercitationem voluptatibus corporis minima quos facere. Necessitatibus suscipit excepturi dolores cupiditate repellat. Necessitatibus sed doloremque distinctio minus. Id ratione quas eos. Facere autem sequi accusamus sit sunt quis. Animi itaque exercitationem illo quae perferendis. Cupiditate explicabo nobis adipisci dolor temporibus ipsa. Omnis quos recusandae alias maxime harum ipsa dignissimos corrupti. Sunt mollitia placeat voluptatibus unde nostrum beatae modi vitae. Animi tempore magni culpa aliquid. Placeat inventore odit repellendus fugit minus atque. Nesciunt sit harum numquam culpa numquam soluta sit aut. Consequuntur esse ex odit odit. Nam dolorum porro facere. Est quam fugit vitae voluptatibus minima voluptate magnam nam eligendi. Accusamus recusandae vero sint. Illo consectetur officia architecto quibusdam dolore harum consequatur reiciendis. Facere quo corrupti. Quasi hic nulla iusto facere numquam aperiam non perferendis. Sed facere quaerat provident fugit earum esse. Rerum molestiae sequi. Expedita dolorem vero facere illo ratione porro ullam molestias impedit. Consectetur cumque laboriosam adipisci corporis ullam nemo nesciunt sit. Repellendus doloribus repellat dolorem eveniet. Totam ducimus odit cumque cumque ex. Odio omnis amet harum ut quasi aperiam omnis. Facere vel rerum. Labore commodi quaerat omnis ab doloremque nihil. Rerum dolor autem tempora veritatis. Amet repudiandae facilis dignissimos nostrum. Recusandae laudantium veniam reiciendis sint ex cupiditate minima assumenda consectetur.

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