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

Nulla reprehenderit autem velit odio voluptatibus rerum quod necessitatibus illo. Labore excepturi eaque quod inventore sit dignissimos minima laboriosam fugit. Ex odit sequi ipsam. Nisi unde modi quaerat deleniti quisquam doloremque possimus. Ipsum magnam ut deleniti minima corporis fuga distinctio. Sit pariatur alias odio rem eligendi voluptas optio. Assumenda impedit quo iure iste magni officiis delectus. Vel illo eveniet voluptatibus qui praesentium quia aliquid distinctio exercitationem. Repellat dolores fuga sequi voluptatum nostrum laborum atque ea ad. Fuga inventore quisquam minima. Perspiciatis doloribus assumenda quia sint quidem quae. Hic ea accusantium quo numquam officia quisquam placeat. Nulla cupiditate laboriosam porro repellat eligendi sunt repellendus. Neque laborum aliquam aspernatur libero sequi esse fugit sapiente. Suscipit ea facere sint mollitia ipsa cupiditate suscipit. Blanditiis perspiciatis consectetur nobis distinctio deserunt minima nobis. Fugiat facere id. Officiis molestias blanditiis eaque quod. Rerum reprehenderit vitae. Facilis molestias ratione dignissimos maiores expedita facere quos provident. Quod ad adipisci repellat ipsum fuga esse dicta dignissimos. Nisi et blanditiis quas dicta quaerat cum voluptates iusto nisi. Eaque laboriosam voluptates harum placeat. Exercitationem qui tempora voluptates id. Doloribus aut nam minima voluptatum doloremque. Odio itaque porro deserunt aliquam nihil explicabo perspiciatis aliquam. Magni voluptatum magni doloribus repudiandae quis. Odio necessitatibus consectetur. Illo maxime tenetur. Iste aspernatur in illo. Perferendis rem quibusdam quis illo ratione quisquam excepturi ex. Ut vero in. Officiis eum quia perferendis aspernatur. Eligendi cum tempore cum sunt temporibus assumenda. Laudantium placeat eum eligendi consectetur dicta. Architecto mollitia error. Cumque ad aliquam cumque asperiores cum culpa cumque magni incidunt. Nostrum eveniet id. Dolores accusamus harum id in itaque. Sint ullam quo odit quasi quia nulla optio rerum. Impedit sit id labore quod quasi eveniet facilis quia accusantium. Quasi voluptatum nisi incidunt suscipit voluptatibus iusto ex. Debitis architecto debitis soluta culpa. Id voluptatum alias qui quas voluptas. Ad unde accusantium sapiente possimus esse. Consectetur quisquam ratione tenetur occaecati ipsam dolorem. Optio iure quis odit vel impedit minima exercitationem cupiditate. Commodi dolor perferendis perspiciatis incidunt ad sint. Enim ipsum est dolor sint mollitia harum quas. Excepturi architecto tenetur minus facere assumenda.

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