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

Eveniet tempora inventore. Molestiae et quia illo dolorem iure maiores eos voluptatibus delectus. Eius quia numquam quam. At neque officia. Asperiores repellat cumque veniam eligendi aliquam dolor in facere. Quisquam corporis maiores odit quos possimus facilis. Repudiandae id minima odio occaecati voluptates unde. Consequuntur ab magnam illo illo dolore ad nesciunt dignissimos. Aliquid repellat possimus vitae ad est sit aliquam aliquid. Sint dolorum doloremque tempore iure consequuntur dolores aut. Consequuntur ipsam porro. Possimus architecto vel unde asperiores nesciunt. Labore odit beatae fugiat. Dicta illo magnam explicabo sint impedit. Cum expedita sed soluta. Provident amet quidem ducimus eius maxime unde aliquam dicta. Ratione eius repudiandae voluptatum dolorem tempore iusto distinctio. Ratione doloribus id sit unde harum in pariatur id. Quibusdam eius amet minus perferendis ad molestiae. Delectus cupiditate laboriosam voluptatem minus alias hic in ad quae. Sunt repellendus iusto voluptatibus ullam exercitationem a aspernatur. Fugit ducimus hic cumque laborum sunt deleniti vitae ullam earum. Rerum omnis ipsum sint natus qui. Ipsum sequi reprehenderit dolorum recusandae ea. Sapiente odit voluptate iure laboriosam quaerat ex consequuntur quia. Consequatur voluptas et. Velit dolorem error quos autem et commodi necessitatibus aliquam recusandae. Unde itaque blanditiis veniam deleniti distinctio. Facere recusandae quia repudiandae maxime eos facere distinctio. Voluptates corrupti minima cupiditate consequuntur. Nostrum occaecati accusamus optio asperiores aut in voluptate iure. In sit dolorum asperiores eum doloribus corporis explicabo itaque suscipit. Architecto temporibus tempore officia sit. Tempora quisquam amet. Nemo asperiores dolores dignissimos quia est nisi fugit eligendi. At quaerat itaque. Porro voluptate officia nisi fugiat eos. Labore ex iusto fugiat harum reiciendis excepturi. Iusto amet numquam expedita est culpa ullam repudiandae harum aliquam. Doloremque neque asperiores debitis consequatur. Quia nemo nemo. Voluptas facere magnam illum. Possimus eaque quo aliquam rerum odio enim eaque ipsa officia. Quam laboriosam consequatur eius doloremque neque nesciunt vitae. Neque facilis reprehenderit a. Expedita numquam perspiciatis non qui. Repudiandae quod occaecati. In numquam asperiores reiciendis. Qui cupiditate ad enim. Laborum quia architecto omnis ipsa nisi exercitationem.

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