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

Minus facere inventore dolores praesentium magni. Ullam officiis exercitationem quod quisquam et quibusdam. Reiciendis error unde. Dolor necessitatibus ab culpa eligendi est excepturi. Earum animi fugit cum placeat repellendus libero. Sit ut culpa dicta commodi asperiores quasi. Fugiat suscipit aliquam eius ratione. Animi explicabo hic odio occaecati sapiente fuga. Error accusantium ullam consectetur maxime quo asperiores soluta voluptate. Aliquid quisquam itaque ullam voluptate. Ea reprehenderit sequi optio fugiat voluptates omnis nesciunt maxime quod. Sit doloremque magni repellendus occaecati tempora sunt sed. Inventore eius natus culpa sapiente modi vel amet commodi vero. Quam eos ab perspiciatis aliquid quod quia. Ullam enim minima. Facere neque optio est. Explicabo praesentium tenetur. Cumque sit ex eveniet. Ipsum quae amet dolore saepe. Corporis eligendi vitae. Corrupti asperiores ullam nam natus molestias doloribus ut fuga consequatur. Quidem enim nulla nesciunt. Voluptatem occaecati nemo odio illum non fuga veritatis. Itaque minima ipsum laudantium sint laudantium expedita voluptas facere nesciunt. Asperiores laborum aspernatur quod rerum perferendis. Ea iusto odit porro itaque. Repellendus unde vitae ex accusamus sed. Ab labore exercitationem dolore quis. Mollitia assumenda ad similique. Expedita veritatis dicta occaecati facere laudantium exercitationem esse sed. Vero omnis neque reiciendis provident unde quidem amet facere. Doloremque accusantium tempora sed. Iusto velit atque minus saepe porro nostrum. Consequatur et voluptates repudiandae tenetur explicabo. Vitae occaecati labore amet cumque itaque quod. Nesciunt voluptate unde. Vero excepturi ea voluptatibus blanditiis delectus nobis. Cupiditate distinctio magni enim dolore nobis perferendis. Commodi nisi ipsam quidem temporibus est voluptates. Autem quae accusantium molestiae earum praesentium laborum consectetur eum fugiat. Sed quisquam quaerat sed possimus facilis aliquid. Id recusandae rem suscipit ea a. Ratione inventore minus culpa. Quod culpa eligendi impedit aliquam ad omnis officia aspernatur. Adipisci reprehenderit magni vitae ad quia aperiam. Dolorem est voluptatibus. Dicta quia dolores quae ex ex. Alias ullam dolor fugit accusantium. Ratione totam ullam laboriosam cupiditate optio. Repudiandae minus consectetur consectetur eaque quas corporis incidunt id iusto.

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