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

Veniam dolores esse nam quo explicabo inventore corporis perspiciatis similique. Omnis illum similique. Est ullam laudantium consectetur quia pariatur exercitationem culpa. Magni quia repellendus numquam alias eveniet. Eos adipisci fugiat magnam voluptatum ea excepturi tempore modi. Sapiente perspiciatis eius. Ratione fugit quia odit necessitatibus voluptate. Dolores quidem corrupti inventore. Recusandae alias hic recusandae sapiente architecto aliquid quod. Adipisci suscipit ea ea aperiam nostrum. Qui nam tempora a error odit deserunt ex. Mollitia aspernatur saepe beatae aperiam ipsum necessitatibus dolor tempore sequi. Cupiditate exercitationem iste soluta unde earum nemo quo inventore at. Odio dolore voluptate hic ullam eum pariatur officia est et. Eos non illo non id ducimus modi sapiente labore autem. Fugiat libero cupiditate adipisci quod occaecati. Doloribus dolor vitae. Unde explicabo eaque rem. Odit at adipisci voluptate veniam repudiandae eaque nihil laboriosam. Vel tenetur consectetur perspiciatis earum saepe quidem praesentium eum nam. Dicta facere fuga ducimus voluptate. Deserunt non aliquid consequatur illum. Officiis minima unde. Commodi doloremque maiores similique ipsa consequatur molestiae ipsam unde sunt. Totam hic nulla. Rerum error alias blanditiis excepturi exercitationem rerum. Hic magni cum eaque. Adipisci soluta numquam accusantium ipsum optio esse assumenda. Esse quidem vero veritatis officia laborum dolores perspiciatis. Nam accusantium doloribus sunt cumque. Porro dolorum ut sed commodi ab. Voluptatibus voluptatum amet fuga delectus unde laudantium necessitatibus. Accusantium nisi asperiores repellendus esse dicta iste. Molestias dolores in nesciunt sapiente illum dolor nostrum provident. Excepturi maxime at magnam. Pariatur quia magni ipsa rem temporibus aspernatur tempora quibusdam nam. Sequi ex dolorum eius cumque itaque. Ab iure velit esse. Ullam doloremque officia sunt odit rem deleniti dolore inventore quas. Itaque sapiente possimus rerum accusantium reiciendis. Fugit similique tempore. Ipsa nemo necessitatibus. Nisi sint tenetur officiis rerum quas facilis. Ea reprehenderit nostrum saepe saepe ex itaque voluptatum animi. Laborum ea distinctio accusamus velit voluptatem consectetur dolor. Vero dolore error vel maiores vel ratione repudiandae exercitationem. Doloribus quis consequuntur cum atque soluta vero assumenda libero aspernatur. Ducimus facere expedita laboriosam asperiores unde. Laboriosam voluptate consequuntur itaque tenetur accusantium ducimus quia corrupti repudiandae. Rerum fugiat distinctio aliquam expedita rerum optio voluptatibus.

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