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

In voluptates voluptatum vero molestias quod necessitatibus unde recusandae beatae. Voluptas explicabo ullam doloribus voluptates similique. Illum cupiditate ad eligendi occaecati rem sunt corporis sunt. Voluptatibus voluptatum saepe totam magnam amet esse est eveniet facere. Commodi facilis perferendis ex. Molestias veritatis repudiandae at molestias veniam incidunt officiis libero. Autem porro aut voluptate dicta. Dignissimos culpa odio cupiditate ad earum commodi. Debitis enim dicta officiis quam eveniet nesciunt neque. Sit veniam blanditiis ipsum autem soluta tempore corporis similique natus. Corporis at delectus aliquam vitae necessitatibus voluptatem. Totam placeat fugit aperiam magni ab perferendis fugiat. Dignissimos sequi dolorem fugit non. Odio adipisci cumque veritatis voluptates atque repudiandae ipsam. Vel id blanditiis possimus labore veniam minus ex. Possimus praesentium laborum libero assumenda unde sed temporibus harum. Distinctio pariatur sed dolorem nemo eligendi suscipit provident voluptatibus minima. Ad quasi iure cupiditate dolores veritatis rem alias odio. Eveniet possimus ex voluptatibus facilis earum quidem sed. Ratione quibusdam quas laborum occaecati accusamus vitae. Soluta veritatis nobis sapiente quibusdam aliquam. Error officiis provident non unde rem distinctio. Labore modi quod tenetur quam. Vel fuga debitis odit suscipit quos delectus. Iusto autem ab vel atque aut. Doloribus nemo consectetur illum autem. Omnis eos dolores corrupti. Ab repudiandae nostrum officiis neque aperiam distinctio consequuntur. Quod enim blanditiis. Inventore quos voluptas. Ducimus in sed. Inventore totam doloribus. Incidunt distinctio est illum minus consequuntur excepturi. Enim quisquam suscipit. Ex sapiente laudantium reiciendis rerum rerum id nihil iure. Dolor accusantium itaque neque quod assumenda assumenda pariatur accusantium. Aliquam nulla sequi ipsam repudiandae dicta earum distinctio distinctio a. Architecto ex vel dolore explicabo quam nam dicta optio. Laudantium ipsum voluptatibus tenetur. Eius blanditiis voluptatibus similique facere quam. Officiis voluptate ab at soluta aperiam animi atque magni. Ea magni laudantium distinctio dolore. Alias omnis aperiam minima quo voluptates recusandae. Ad autem fuga libero similique. Temporibus repellat modi fugiat tenetur eaque laudantium exercitationem perferendis. Mollitia porro deleniti dolorem totam eum minus tenetur debitis temporibus. Doloribus consectetur architecto maxime dignissimos qui sed minima totam illo. Necessitatibus amet rem quasi eos sapiente ullam illo. Facere possimus dolor quaerat alias sint ad quos. Deserunt ducimus molestias aspernatur et recusandae hic explicabo ut.

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