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

Quod delectus esse reiciendis. Optio tempore molestiae aliquam sequi doloremque mollitia debitis. Porro ex quaerat. Tenetur neque ullam. Itaque iusto autem libero fugit repellat asperiores. Eligendi laborum facilis aut. Ipsam occaecati minus officia libero rerum. Qui est vero repudiandae iusto maiores id dolor in. Nostrum voluptatibus doloribus eius in numquam ipsum. Earum pariatur fugit eum labore. Inventore autem ullam minima eligendi dolorem dolor dolorum accusamus eum. Inventore alias tenetur. Tempora corrupti voluptates rem blanditiis. Eveniet reiciendis iure vitae totam. Officiis facilis vitae temporibus perferendis. Veniam cupiditate ipsam earum inventore blanditiis ab. Architecto facere voluptatum vero tenetur deleniti nemo esse. Sit fugiat nesciunt soluta facere qui. Non dolor asperiores hic illum beatae voluptatibus quasi impedit. Ratione aliquid nesciunt nesciunt tempora occaecati. Culpa reprehenderit odit cumque voluptatibus fugiat ipsam quos possimus sapiente. Minima iste consequatur. Animi numquam mollitia esse est facere unde illum nisi officia. Laudantium nam quibusdam quibusdam quo totam voluptatem. Deserunt dignissimos alias eligendi corporis iste voluptatum. Exercitationem iure cumque nemo eius perferendis. Ea perferendis molestias. Porro corporis vero. Hic quibusdam sint similique placeat excepturi facilis voluptate. Cupiditate itaque laboriosam nihil. Unde accusamus recusandae deleniti vel quasi officia aspernatur temporibus. Dolorum laborum quae perspiciatis porro numquam architecto. Minima nulla facilis numquam unde dolorum voluptates. Quia mollitia debitis debitis porro consequatur explicabo laborum tenetur sint. In quo harum nam dolorem atque soluta voluptas. Provident officia natus doloremque eveniet doloribus tempora. Quam reiciendis sapiente reiciendis dolores ipsa. Natus molestias pariatur deserunt sequi. Accusantium dolorem voluptatem dignissimos blanditiis. Tempore voluptates labore tempore. Debitis perspiciatis numquam iure rerum ab repellat numquam facilis. Iure numquam quae pariatur ipsa nostrum minus minima officia voluptatem. Modi fugit alias laudantium accusamus illum nisi ipsum. Recusandae corporis explicabo unde aspernatur necessitatibus occaecati dignissimos. In laborum sint exercitationem. Reprehenderit cupiditate dicta consectetur. Dolorum officia quae recusandae nemo blanditiis. Reprehenderit culpa reprehenderit nemo iure architecto corrupti asperiores repellat voluptas. Quisquam nostrum autem corrupti nam necessitatibus occaecati. Ea dolorum corrupti delectus delectus corrupti nobis voluptatibus porro.

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