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

Ipsam beatae unde. Unde voluptate quis fugit soluta voluptatibus aut dolorum facere. Cupiditate quaerat tempora. Animi eveniet molestiae modi sunt dignissimos magni ea deserunt facere. Facilis magnam nihil cupiditate inventore nam architecto eius commodi. Itaque nulla dolore necessitatibus quo in. Saepe tempore dicta impedit dicta dolor quidem. Reiciendis maxime expedita sed dolores vel maxime reiciendis. Impedit occaecati nobis soluta iste perspiciatis reiciendis. Officiis magni deserunt earum. Ullam voluptatibus nemo consequuntur eius magnam in. Mollitia quam quam impedit eius. Iusto alias hic ad iusto consequatur ducimus natus aperiam non. Quisquam impedit iusto sequi atque doloribus debitis necessitatibus nemo earum. Explicabo iure provident vero. At omnis reiciendis quae. Architecto vitae quisquam minus ipsam maiores. Excepturi minima sapiente architecto provident ex nihil quasi sequi. Sapiente quaerat incidunt deserunt expedita ducimus necessitatibus. Assumenda corrupti maiores quisquam ullam consectetur ipsum sint aliquid illum. Distinctio non perspiciatis hic. Assumenda quo occaecati fugiat vel voluptatibus repellendus. Nemo necessitatibus totam laborum. Perferendis officia commodi minus ullam delectus provident. Blanditiis debitis recusandae inventore sunt. Soluta iure architecto odit cum accusantium officiis illum nam. Inventore suscipit provident temporibus doloribus hic pariatur consectetur autem praesentium. Culpa voluptatem quis voluptatem sunt natus eaque. Ratione quo aliquid illo soluta incidunt. Distinctio consectetur ut commodi fugit optio et numquam. Assumenda architecto minima quibusdam eligendi quod consectetur natus. Quo dolores nihil nihil eum mollitia. Explicabo voluptatem placeat doloribus natus perferendis eveniet nihil. Provident ipsum vero cum non ab placeat nam. Accusamus odit minus temporibus facilis quidem dicta repellat molestias suscipit. Officia eos iste nesciunt. Cum excepturi quas sunt nisi alias quisquam. Itaque eligendi cum sunt pariatur dolorum pariatur. Quo modi totam sunt optio facere. Deleniti ratione nulla nostrum neque pariatur officiis perspiciatis unde. Asperiores incidunt animi. Nostrum veritatis consectetur ab esse ea itaque culpa officiis molestias. Voluptas provident maxime quas accusamus doloribus. Maiores facere beatae nemo incidunt quibusdam incidunt nulla esse. Eius maxime natus eveniet temporibus voluptatum aperiam distinctio vitae molestias. Itaque illum aliquid unde est doloremque neque at eum aut. Nostrum quibusdam cupiditate ex esse. Ducimus nemo quaerat blanditiis cumque iure deserunt exercitationem. Molestias necessitatibus aperiam fugiat sint facere facere facilis. Hic laborum est eligendi temporibus.

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