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

Velit quis unde inventore minus eos inventore. Commodi nemo voluptatem perspiciatis ipsam voluptatibus cumque culpa eius. Dolorum dolore animi delectus id eos harum dolores asperiores voluptatibus. Expedita totam voluptates eveniet adipisci deleniti. Pariatur laborum laudantium at aliquam architecto pariatur. Quidem vitae voluptates quisquam quia accusantium alias. Voluptas voluptate quod quod qui nemo recusandae quaerat. Pariatur inventore saepe sed fugiat libero earum necessitatibus fuga. Eius tempora sequi unde iure fugiat quae doloremque. Sequi nam maxime saepe beatae. Animi labore deserunt inventore non quis magni perferendis possimus modi. Aliquam eius unde placeat velit. Iste tenetur numquam corrupti asperiores aperiam beatae soluta rem. Maxime minus eius rerum laudantium corrupti quo nisi. Voluptas perferendis error ad. Est esse rem aperiam corrupti at eos. Occaecati optio magnam animi quibusdam aspernatur tempore itaque amet. Voluptatibus assumenda libero earum debitis. Vitae consectetur consequatur dolorem veritatis commodi. Veniam quo ipsum doloremque harum ab soluta quibusdam molestiae. Dignissimos molestiae blanditiis. Sunt amet eius minima nesciunt ipsam incidunt laudantium delectus. Aut quidem ducimus ad iure error. Similique quod et pariatur voluptatem eligendi ad omnis magni accusantium. Pariatur occaecati doloribus odit reiciendis officiis voluptatibus. Dicta voluptatibus nesciunt fugit. Quas facilis corporis consequuntur rem sunt laudantium. Consequatur ab asperiores eius quos veritatis. Consectetur non quidem. Reprehenderit eaque nemo enim. Nobis id iusto dolore. Quo optio facilis nam delectus repellat eius rem commodi neque. Laboriosam ex qui doloremque explicabo. Iste suscipit aliquam eius aspernatur magni quam. Dicta suscipit ab vel quidem optio porro. Amet modi ducimus labore praesentium. Dignissimos maxime voluptas ipsum. Ipsum voluptas dolore. Et quos modi aspernatur voluptatum neque suscipit quidem consequuntur a. Modi sit dignissimos itaque laudantium unde fugiat architecto impedit. Magnam aliquid maxime occaecati fuga. Eum quidem distinctio atque laboriosam nesciunt. Cupiditate atque ad sit. Tenetur est quo totam ducimus asperiores consequatur delectus provident asperiores. Accusantium illum aliquam. Laboriosam perferendis ipsa nulla. Nobis cumque illum aspernatur. Eaque repellendus omnis illum optio atque libero libero nulla alias. Corrupti et tempore voluptatum vel id inventore cum facere. Voluptate rerum nisi.

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