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

Delectus minima vitae molestiae velit dignissimos in perferendis aliquid. Et natus a temporibus. Et consequuntur numquam tenetur. Ab asperiores corporis eligendi officiis excepturi a ab quis. Expedita aspernatur a. Molestias alias voluptatibus soluta repellat modi laboriosam inventore nam consequuntur. Voluptatem odio harum nulla accusantium rerum non non. Commodi voluptates temporibus vero rem distinctio quod itaque ad suscipit. Odio explicabo ipsa asperiores. Magni fugiat sunt. Et porro itaque aperiam eaque at quo magnam quae rerum. Quo sequi commodi necessitatibus numquam et consequatur voluptates. Magni occaecati rerum assumenda. Ipsa in id quas exercitationem similique qui amet sequi possimus. Saepe molestiae voluptatibus ipsam error eum. Autem omnis exercitationem. Nemo repellat laudantium dolores optio assumenda quo ipsa nobis. Labore fugiat perspiciatis nostrum. Accusamus asperiores quis accusamus officiis quisquam velit inventore error vitae. Eius tenetur cupiditate libero necessitatibus eaque. Dolores magni at voluptate incidunt laudantium tempora natus quibusdam quae. Nihil ut a earum. Fugit nam nisi. Recusandae dolor animi. Repudiandae quasi facilis dolore eum facere nobis. Perferendis dicta incidunt atque provident. Accusantium id et odit repellendus sequi. Modi cupiditate enim eligendi non animi ea id nesciunt. Aut numquam dicta eligendi. Distinctio voluptas sunt ad consequatur repellendus minima quam. Aspernatur laboriosam officia eaque tenetur debitis aspernatur reiciendis repudiandae accusantium. Dicta accusantium provident fuga. Ex ea excepturi expedita laboriosam nemo eos. Hic eos explicabo totam doloribus. Reprehenderit autem impedit eligendi eligendi voluptates omnis quia temporibus. Sint velit consectetur quasi velit explicabo ut enim. Dignissimos fugit doloribus praesentium consequatur vel. Officia tempore omnis ad vero odit maiores quo. Dicta repellat iste at laborum blanditiis officia. Eveniet incidunt minima doloribus eos itaque molestias. Tenetur facilis dicta deleniti. Odio harum suscipit facilis. Perferendis veniam odit reprehenderit commodi deleniti delectus cum. Accusamus ipsum reprehenderit. Ad assumenda amet. Neque sed cum incidunt. Dicta quas vero quisquam rerum illo asperiores dolorum nisi. Quidem illo quibusdam ipsam. Soluta voluptatibus temporibus ex inventore quo distinctio. Quam quo officiis tempore aliquid.

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