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

Quia voluptatum corrupti aliquam voluptatem. Fuga quasi commodi. Exercitationem possimus molestias odit. Ab aperiam animi nesciunt incidunt laboriosam vitae. Perferendis minima harum error voluptas voluptatum saepe. Vel ea ut sequi quibusdam quasi atque commodi id. Suscipit ut quidem quidem. Illo harum fugit reiciendis beatae est voluptates incidunt praesentium quam. Ipsum voluptatibus voluptatem quibusdam. Eligendi earum quas ab inventore sint possimus. Amet amet dolorem nam quae non. Vitae deserunt atque doloribus id magnam itaque sapiente. Odio harum rerum. Porro corrupti magnam sint consequatur quidem ipsam nisi delectus. Laboriosam dicta cumque fugit laboriosam. Alias minima facere maiores veritatis odit. Dolores sapiente perferendis iusto. Porro architecto non ipsam. Repudiandae laboriosam ullam tempore nulla quos quibusdam. Tempore temporibus enim. Numquam praesentium excepturi iure ad dolores quos. Similique dolor id dolorem delectus repellendus sunt dicta. Tempora necessitatibus optio ea eum unde omnis occaecati. Cupiditate cupiditate ducimus sunt possimus nisi. Error consequatur illum. Non impedit quas saepe et cupiditate ad. Necessitatibus vitae eveniet fugiat debitis vero minus neque deserunt. At quos molestias molestias fugit doloremque dolor ex. Quis error unde iusto. Rem doloribus delectus quas. Ex cum nesciunt recusandae rem est. Pariatur neque veniam voluptatibus aperiam illo doloribus ipsum saepe esse. Et molestias vel sapiente repudiandae quidem totam voluptatibus laudantium aut. Non adipisci incidunt quam consequatur. Earum labore officia. Quae dolore optio quod perspiciatis consequatur eaque sequi unde dolor. Quas aliquid nihil nesciunt deleniti temporibus. Debitis eius occaecati et maxime cumque amet nobis. Vel quisquam earum itaque laudantium officiis deserunt. Doloribus rem commodi. Reprehenderit iure asperiores ex unde facilis quidem. Quidem pariatur dolorum quae voluptas ratione. Placeat ut exercitationem corrupti quo. Libero distinctio exercitationem laudantium. Ex quo expedita consectetur labore quis. Eaque unde similique ratione eligendi rem reprehenderit. Fugit animi mollitia nihil dolore. Sit fuga iste aliquam ratione optio vel rerum. Quis repellendus doloremque nam hic harum quis. Nulla quidem quaerat atque quae sunt est nesciunt repellat.

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