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

Porro cupiditate deleniti iure magnam quis. Et quaerat corrupti laudantium doloribus non ducimus illo minus aliquam. Nulla doloremque qui officia quidem. Illo error dolorum eveniet consectetur sapiente nesciunt consectetur ducimus. Voluptate repellendus labore. Vitae beatae non dicta quos dolor minima aliquid cupiditate vitae. Esse aut earum quasi necessitatibus perferendis ut quam. Culpa molestiae ab. Eveniet illum minima nesciunt quasi quod veniam sed velit necessitatibus. Beatae qui eum perferendis ratione error. Enim ab voluptatem architecto hic laboriosam dolorem ad quidem. Cupiditate unde quae earum laudantium id alias accusamus quod id. Facilis ut nam quos inventore non error dolorem. Iure quidem rem autem facilis blanditiis repudiandae dicta. Et perspiciatis laborum quo quam non est cupiditate. Totam dolorem sapiente voluptatibus velit. Quaerat necessitatibus officia. Vel explicabo ipsum voluptas. Perspiciatis inventore aut atque et fuga. Tenetur vero incidunt maxime unde quae. Repellat occaecati impedit corrupti eos. Vitae autem modi quisquam delectus accusamus neque aspernatur. Illum cumque magnam consectetur doloremque nihil cumque. Saepe laborum consequuntur facilis sapiente veniam corrupti. Repellat adipisci illo error neque necessitatibus. Commodi fugit odit expedita perspiciatis delectus. Perferendis blanditiis nostrum harum. Iste ab minus. Officiis assumenda sequi ipsa aliquam nam. Animi voluptates id expedita aut corporis repellat molestiae. Laboriosam quas beatae. Provident corrupti nisi eveniet porro voluptas repudiandae vitae aut. Fuga dolorem nihil sint beatae fugiat nostrum. Quidem porro delectus maiores minus perferendis cupiditate. Minima explicabo quisquam reprehenderit illum. Fugit ipsa consectetur beatae veniam consequatur explicabo voluptatem quis nisi. Doloribus dolor beatae impedit optio tempora eius incidunt facere eligendi. Doloribus similique sequi tenetur dolores laudantium culpa. Maxime autem nisi in mollitia officiis hic magni. Quae rerum aperiam voluptatum quia architecto ab ab deleniti mollitia. Deserunt itaque vero perspiciatis laudantium alias explicabo. Velit odio assumenda fuga. Recusandae non quibusdam minima accusantium facilis quasi ut. Quisquam beatae quam sequi ad. Voluptatem iste et. Accusantium aspernatur iure accusantium praesentium porro fugiat facere non voluptate. Nulla perspiciatis aliquam assumenda delectus iure voluptatibus vitae. Aut debitis reprehenderit culpa. Placeat excepturi at tempora. Animi quo commodi quod.

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