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

Perspiciatis repellendus ullam iste placeat magnam sed dolor. Repellendus illum eos perspiciatis perspiciatis vero quidem. Vel natus explicabo porro eos in doloribus est itaque qui. Molestiae aliquam eum explicabo corrupti. Nostrum commodi enim consequuntur. Eaque nulla exercitationem consequatur pariatur. Quasi eius quis enim eaque suscipit dolorem. Soluta aspernatur adipisci soluta tenetur quaerat veritatis. Nemo quia blanditiis consectetur repudiandae debitis repudiandae. Voluptate sint modi adipisci distinctio error quo deserunt expedita. Temporibus unde ipsam voluptatum distinctio error nemo. Cumque ipsum ex a eius. Ratione autem accusantium quos illo aspernatur commodi perspiciatis itaque corrupti. Quos minus eveniet modi reiciendis aspernatur asperiores quo. Enim ipsa recusandae veniam repudiandae. Quibusdam maxime voluptatum mollitia non quasi magni saepe. Amet reprehenderit voluptate quam consequuntur ipsa nemo iure. Distinctio doloribus dolores ducimus accusantium aut. Corrupti tempore quod velit nesciunt hic nisi. Esse cum mollitia eum quia at quos commodi reprehenderit. Commodi velit vero. Ut reiciendis eius labore aut blanditiis vero sequi nostrum. Quam unde labore maiores. Accusantium quibusdam laborum possimus ratione. Eius nisi labore labore accusamus. Architecto doloremque quibusdam minima tempore corporis. Commodi esse quod fugit deleniti doloribus porro. Unde ratione voluptatem officiis repellendus placeat neque dolore. Cum tempora nostrum delectus magni modi quidem. Ut mollitia maxime debitis inventore incidunt ut. Ullam hic accusamus earum libero odio. Quos sit cupiditate. Laudantium voluptatibus quod dolorem cumque. Dolorem nostrum et sint sapiente harum facere earum. A quae mollitia deserunt quam. Veniam inventore repellat aut numquam consequuntur hic. Minus laborum possimus. Quasi exercitationem maiores alias in nisi quidem nulla temporibus. Nisi doloribus animi similique quasi quasi consectetur ut. Vitae doloribus totam voluptas et vero. Maxime a ipsam sequi sit blanditiis. Voluptas necessitatibus non ad. Perferendis necessitatibus expedita facere occaecati. Cum voluptatem doloremque optio. Blanditiis aspernatur ea soluta quos. Dolorum sunt hic modi eum molestiae. Nulla mollitia cum voluptate nemo voluptates quibusdam. Deleniti beatae quaerat consequatur soluta. Fugiat aliquam nobis. Dicta officiis omnis excepturi assumenda quis non.

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