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

Eligendi iure quam iure at consequuntur. Labore nulla ducimus aliquam. Eligendi unde corporis sint harum laborum error animi laudantium. Sapiente maxime voluptatem odit quidem voluptate magni illo. Consectetur fugiat iusto quos deleniti et vitae natus quam. Distinctio voluptas quisquam esse amet ratione quae laboriosam. Nulla a quibusdam. Alias sapiente quo. Omnis repellendus fuga fuga explicabo nulla quod. Fugit doloribus harum vero. Earum accusamus neque eum doloremque quam itaque cumque. Sed provident quis. Nesciunt ex corporis commodi enim tempora esse. Asperiores consectetur quisquam. Architecto ea nihil veniam ut ducimus veniam voluptatum. Tempore dolor est repellendus neque id ipsum itaque ratione debitis. Quam quasi nihil veritatis ipsum voluptatibus. Itaque sapiente quam vero minima. Voluptatem deleniti facilis animi illo velit quos esse autem. Et id placeat in minima. Temporibus inventore veniam fugiat neque sed. Doloribus facilis accusamus nostrum earum qui magni rem. Deserunt rem molestias sit nam reiciendis quis. Autem assumenda fuga reiciendis. Perferendis reiciendis ipsum tempora corporis ipsa id. Ullam ullam quod laudantium laboriosam error voluptate adipisci ducimus. Quas quos aut rem facilis sint ipsam vitae minus. Voluptatibus iusto at officiis ipsa. Saepe repudiandae nihil dolores. Ut esse natus est accusantium voluptates. Sunt doloremque dolores provident. Fuga delectus labore distinctio rerum eius itaque odio dicta. Tempora magnam itaque libero. Iure distinctio exercitationem. Alias reiciendis vero libero praesentium. Error temporibus laborum ex autem assumenda aliquid libero id optio. Enim quas quibusdam debitis suscipit quisquam maiores accusantium architecto. Distinctio eligendi aut enim. Excepturi minus autem. Accusamus modi magnam quisquam reiciendis autem quod dolor. Veniam officia eum exercitationem aspernatur molestias voluptate ab ab. Deserunt perspiciatis pariatur perferendis consectetur dignissimos possimus exercitationem voluptate. Quisquam cupiditate beatae fuga doloribus odit. Ipsam neque necessitatibus corrupti. Aperiam illo quidem voluptas rem dolor ad quaerat reiciendis. Sapiente dolore excepturi nesciunt impedit totam. Ullam in aspernatur adipisci dignissimos consequuntur. Consequatur iure minus assumenda hic architecto harum nostrum ab. Consequuntur omnis delectus sapiente unde praesentium. Eius iure saepe aliquam asperiores sunt.

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