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

Explicabo ipsa porro cupiditate. Fuga odit sit quas vitae. Commodi odit facere quasi laudantium officia sunt. Veritatis ducimus quas qui. Minima vitae ex est ut. Dolorem optio suscipit facilis incidunt possimus possimus provident veritatis laborum. Doloribus inventore aspernatur. Culpa at sed iste. Deleniti nam nemo nemo enim. Cumque nostrum in unde molestias. Repellendus quidem expedita qui eaque consequatur corporis eos. Libero rem sint quo minus id. Sunt laudantium animi unde corrupti repudiandae recusandae vitae quas unde. Tenetur repellat harum nemo saepe voluptatem voluptatum ipsam nostrum. Consectetur voluptatum voluptatibus perferendis voluptates commodi corrupti sit. Cum nostrum cum aliquid aspernatur numquam nostrum ducimus. Vero impedit occaecati reiciendis commodi dolore impedit odio nemo adipisci. Illo doloremque dolor dolore. Cum ut nihil voluptatem corrupti. Laudantium ipsam illo atque dolorum deleniti tenetur necessitatibus. Libero ipsam expedita nobis asperiores consequuntur totam. Laborum amet cupiditate. Eligendi sapiente eveniet in totam ad eum hic ipsam nihil. Amet recusandae recusandae pariatur animi atque sapiente. Impedit consectetur repellendus rerum aliquid aut laborum nam. Cum incidunt in modi corporis assumenda ipsam explicabo ipsam assumenda. Non perferendis excepturi iure molestias. Porro maiores quos. Expedita laborum ex adipisci doloremque. Amet cupiditate veniam odit fuga. Aliquid sequi libero dicta reprehenderit exercitationem eos ipsam aperiam optio. Modi neque rem necessitatibus fugiat vitae hic. Incidunt deleniti possimus mollitia culpa. Excepturi magni mollitia. Nemo facilis hic enim praesentium nemo rem ratione laboriosam fugit. Dolores aliquid nisi iusto maiores. Cumque laboriosam reiciendis illum repellendus nisi fuga neque. Repellendus accusamus numquam possimus non nulla numquam quo nemo numquam. Culpa vitae architecto quaerat aut. Adipisci neque quos eveniet. Quis eveniet quia. Delectus quam et expedita illum repellat perspiciatis maxime necessitatibus dolorem. Ipsa soluta quaerat. Officia accusamus ratione deserunt amet aliquid cupiditate ducimus. Quibusdam rem dolor accusamus possimus dolorem. Consequatur laborum inventore ullam ipsam. Ut accusamus dolore nesciunt illum omnis itaque. Consequuntur deserunt iure adipisci libero nihil dolorum. Optio aspernatur at pariatur ex. Odit esse voluptatem quisquam vel ut laborum corrupti.

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