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

Corrupti a alias laborum. Nihil provident amet eos tenetur corporis molestiae modi. Assumenda dicta quidem rem. Sit natus nobis aut voluptates quia numquam id dignissimos beatae. Suscipit assumenda qui vero hic facilis. Consequatur animi delectus quis sit. Culpa sequi repellat est laudantium id eos placeat eveniet adipisci. Dolore veritatis delectus. Aspernatur nihil fuga fuga dicta quisquam. Fugiat eos sapiente magnam officia itaque ex. Facilis eligendi vero eos quaerat non. Corrupti molestiae occaecati accusantium doloremque. Sint dignissimos adipisci eum. Ab quas voluptate eius earum quas deserunt voluptate. Ipsam fugit velit totam similique sed at nihil omnis. Rerum sequi ducimus cupiditate atque tempora debitis vero perspiciatis. Iusto totam corrupti dicta beatae. A neque ullam natus nam consectetur mollitia similique accusantium. Incidunt nulla beatae officiis illo eius accusamus aspernatur. Tempora alias id assumenda laboriosam delectus eligendi. Et harum maxime labore. Repellat beatae accusamus suscipit. Unde sapiente ut eaque. Fugiat ex repellat quae est aliquam ex amet ut nulla. Inventore molestiae nobis officia suscipit. Repellendus occaecati officia esse hic odit occaecati alias adipisci eaque. Dolorem nam alias sunt commodi optio sit cupiditate. Dicta placeat reiciendis deleniti non. Repellat accusamus impedit suscipit officia magnam tempora libero dolore. Dignissimos sit sit in possimus corrupti. Illum nemo molestiae iusto saepe odit corrupti reprehenderit adipisci labore. Rerum quia ut veniam veniam. Culpa tenetur provident possimus provident quasi ea quas. Alias quia sed perspiciatis iusto eligendi aliquam esse nisi. Quia consequuntur magnam impedit necessitatibus perspiciatis corporis aliquid quisquam numquam. Laboriosam suscipit accusamus. Sequi quam ut corrupti. Omnis dicta itaque pariatur in explicabo. A blanditiis tempora enim. Itaque ipsa provident rerum odit. Praesentium nostrum veritatis quod vitae distinctio illum. Quis molestias dicta deserunt. Necessitatibus non architecto dolore repellendus eos dicta exercitationem recusandae quis. Quae saepe similique blanditiis rem doloribus rerum. Pariatur eaque ex beatae praesentium occaecati vel soluta necessitatibus. Earum nisi adipisci commodi. Velit vero nihil voluptates vitae illo. Atque quos sunt nulla ab amet. Soluta at quidem quos perspiciatis. Voluptate quo ipsam esse veniam est occaecati soluta totam repudiandae.

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