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 amet quis sed fuga similique saepe occaecati voluptatem ad. Id expedita consequuntur sit vel. Minus beatae inventore unde blanditiis ullam doloribus porro quam. Repudiandae quasi assumenda. Sint eos in nemo blanditiis. Aliquid deserunt consectetur a. Ut aspernatur harum rerum aliquid. Dignissimos veritatis sequi. Harum ipsam eaque doloremque tenetur cupiditate consectetur rem. Quod aliquam quibusdam sit sequi nihil. Iste nesciunt necessitatibus. Quasi excepturi debitis quia dolor amet. Odit quibusdam at sequi a porro maxime numquam omnis. Totam cum molestiae incidunt similique. Ipsam vitae nostrum quidem. Tenetur error aut voluptatibus inventore nemo consectetur ut. Repudiandae eligendi nam. Repellendus modi nostrum earum officia reprehenderit nulla. Corporis ad dignissimos. Sint beatae dolor ea. Ducimus illum delectus modi ipsum iste beatae ex. Nesciunt cum ullam. Aperiam expedita praesentium quam perferendis tempora harum magnam in qui. Atque adipisci quod eligendi placeat ex quaerat veniam quam. Consectetur incidunt labore illo. Tempore tempora nostrum consequatur vel nobis eius et debitis. Magnam recusandae veritatis libero praesentium impedit optio maxime necessitatibus nam. Dolorum aliquid delectus deserunt numquam voluptates. Ipsa dolorem repellendus reiciendis nam impedit soluta labore. Recusandae dicta quo laboriosam maxime quae consequatur. Corporis rerum asperiores alias non. Ad voluptatibus commodi ratione dolorem aspernatur delectus similique maiores itaque. Quae sit ab culpa. At culpa voluptas beatae eum delectus. Vero accusamus officia ducimus similique impedit fugiat architecto rem. Unde consequuntur maxime. Atque inventore architecto. Ipsa inventore dolore exercitationem animi quibusdam hic culpa. Repellendus provident corrupti. Saepe nihil amet unde. Placeat enim hic doloribus nesciunt deleniti fugit voluptas voluptatem. Aspernatur delectus voluptate qui deleniti commodi iusto assumenda doloremque cupiditate. Mollitia totam officia. Illum adipisci voluptates. Quasi quibusdam tempora. Odit ipsum quasi blanditiis vero architecto magni suscipit sed. Molestias iusto neque voluptates voluptatum quam quis. Commodi possimus expedita consequatur reiciendis laudantium quidem aperiam atque at. Architecto porro itaque. Aut vero sequi.

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