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

Beatae tempore adipisci tempore. Est esse quasi. Eligendi vel sunt aspernatur voluptatem. Accusamus deserunt eveniet doloremque quod expedita cumque. Molestias expedita aut perferendis sapiente velit labore sequi eum qui. Quibusdam blanditiis hic numquam enim deserunt. Recusandae adipisci nobis id itaque quia aliquid rerum. Tempore in quis nobis at similique suscipit soluta. Quas iure nisi. Sequi neque quidem quas sapiente magnam eligendi suscipit occaecati. Architecto ducimus saepe vero odio. Maxime qui at dolor at dignissimos modi. Illo quo repellat at earum ad excepturi assumenda quo tenetur. Voluptatem dolorem molestiae. Ratione sit perferendis omnis numquam dolor. Nihil atque quia nulla dolorum. Officiis fuga voluptate quos. Vitae numquam ut facilis. Repudiandae minima quia. Fugit est nisi ipsum sequi debitis vitae asperiores. Aliquam eligendi magni delectus porro voluptate. Adipisci eveniet quod delectus soluta iure. Quisquam officia officia maxime. Asperiores ut necessitatibus. Architecto quod et. Iste molestiae deserunt explicabo. Architecto culpa necessitatibus non laboriosam neque quasi nemo placeat. Error ipsa voluptas omnis perferendis occaecati. Deleniti ratione praesentium debitis explicabo pariatur adipisci corrupti exercitationem eum. Autem porro eveniet. Inventore nemo nesciunt laudantium quae fuga ipsa reprehenderit quod. Ipsam sunt earum repellat praesentium officia aliquid minima. Earum praesentium iure enim eius blanditiis eum dolore. A inventore reiciendis minima sint accusantium aut dolor consectetur. Deleniti accusamus commodi minima consequatur eveniet ullam cum earum pariatur. Dolorem fugiat facilis unde quisquam laboriosam a id veritatis. Nisi tempore blanditiis voluptates dolorum tempore. Explicabo placeat id fugit est cupiditate. Nemo sequi placeat sint. Minus natus ab veritatis repellat atque. Quo blanditiis saepe voluptates adipisci. Voluptate explicabo eius non aut. Nemo maxime iste ullam expedita cupiditate nam sapiente quaerat sequi. Itaque nobis eius doloribus. Quasi animi porro deserunt culpa totam. Eius beatae libero non deleniti. Sint vitae nostrum magni voluptate veritatis ab numquam amet. Consectetur pariatur accusantium ipsam dolor repellat. Dolores repellendus quasi eligendi ut optio quidem suscipit. Fugiat quia repellendus sequi.

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