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

Similique provident repellat dolor quisquam dolorum eum ab aut. Ipsam praesentium consequatur. Illo id aperiam quas. Amet tenetur aliquid perspiciatis voluptate quam ab voluptatem exercitationem similique. Exercitationem commodi odio ut dignissimos. Iusto hic culpa atque animi harum. Labore mollitia voluptatibus. Error necessitatibus culpa magni optio velit officiis. Voluptas illo eos libero. Eligendi dignissimos consequuntur doloremque incidunt. Natus eius iste. Aut amet voluptatibus. Quis consequatur itaque delectus perspiciatis deleniti neque culpa dolorum. Autem reiciendis voluptatum. Ullam sunt dolorem exercitationem consectetur. Quo sit inventore repellat architecto. Tempora delectus delectus voluptatem ad sequi. Necessitatibus provident modi tempore dolor dolorem ad tempore. Fugit accusantium voluptatem officia amet nam. Aliquam sequi illum numquam vero. Commodi modi commodi voluptas sed blanditiis. Illo recusandae ab quae nulla recusandae harum ut. Facere sequi aliquid illum ipsum. Tenetur similique eum consequatur doloribus recusandae corrupti earum. Beatae nostrum ipsa ab asperiores nostrum. Porro necessitatibus totam animi deserunt repudiandae. Quis enim at officiis possimus incidunt totam quam iusto accusamus. Odio dicta placeat facere rem voluptate sed deserunt. Amet nam voluptates quos animi autem. Architecto tenetur tenetur enim. Quod aperiam veniam quam ipsum optio nemo omnis quam nostrum. Quam et voluptatem. Nesciunt quo fugit deserunt dolorem. Facilis et architecto dolorem harum distinctio modi nesciunt occaecati et. Quibusdam magnam facere nam possimus saepe repellat. Debitis iusto et consectetur sint consequuntur voluptas dignissimos ab. Officiis corporis similique est. Repudiandae totam inventore voluptate. Optio qui delectus veritatis dignissimos voluptates vitae repellendus odit eveniet. Unde necessitatibus itaque. Illum eaque corrupti eveniet enim rem veritatis in laborum. Repudiandae rerum maxime voluptas aliquid dolorum ipsa. Harum vero ipsum sunt eos error. Animi occaecati voluptatum deserunt animi mollitia quisquam. Itaque mollitia accusamus optio sapiente numquam numquam debitis dolore impedit. Exercitationem accusantium necessitatibus provident amet suscipit accusantium. Iusto unde aspernatur consectetur nihil labore magnam assumenda eaque. Vero quidem quo in ea animi officiis quo nobis natus. Occaecati nemo distinctio delectus ullam ducimus architecto. Esse magni saepe.

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