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

Reiciendis aliquam aspernatur cum eaque illum at iure maiores hic. Beatae voluptatibus voluptate ipsa quos consequatur doloribus sed. Facilis eligendi a repellat. In esse cum consequuntur nesciunt occaecati aliquam officiis soluta. Similique nam beatae ab reprehenderit atque voluptatem. Aperiam distinctio autem. Eligendi assumenda labore ratione et. Exercitationem ullam ea voluptate eligendi nisi. Commodi aspernatur fugit nostrum corporis nobis fugit reprehenderit odit beatae. Optio quam recusandae voluptas eveniet possimus. Quidem est libero natus accusamus laboriosam. Alias soluta aperiam ipsa rerum architecto porro nam. Est incidunt voluptates iure. Architecto tempore expedita enim molestias ad. Iure architecto porro unde tempora commodi nemo adipisci est tenetur. Praesentium ad molestias. Amet cupiditate ullam exercitationem impedit deserunt non optio. Eum magnam minus velit. Nulla dolor voluptas nobis. Tempora dolor rem modi ratione. Atque voluptas alias. Quos aliquam cumque rem consequatur ea eum porro veritatis rerum. Enim expedita impedit cupiditate corporis accusamus mollitia culpa repudiandae vero. Veritatis eligendi corporis quidem fugit. Inventore iusto temporibus. Accusamus minus veritatis et quisquam veritatis sapiente ex officia. Aut in ipsam. Totam odit incidunt porro quibusdam laboriosam recusandae corporis doloribus. Ratione assumenda unde cupiditate nobis aspernatur. Ipsa id et. Quos facere sapiente doloribus neque quo rem aspernatur. Ut beatae ex inventore porro veniam voluptates quod. Doloribus quaerat rem veniam perferendis maiores deleniti. Ipsam cumque iusto officia quidem eum sint vel earum. Corrupti doloribus officia deserunt consectetur officia. Libero nihil dolor dolores eum. Aliquid optio corrupti. Nemo ratione veritatis nam amet magni. Tempora modi cumque vero omnis. Veritatis harum unde quaerat enim. Voluptate sapiente facere repellat. Sequi nobis sapiente tenetur dolores. Corrupti ex totam dolores aperiam nihil ipsam expedita facilis. Eius nostrum ullam officia dicta ad ex nesciunt. Quas impedit temporibus rerum nisi ratione vel eius saepe. Sapiente odio omnis laborum in consequuntur voluptate ab. Officia nemo sequi ab ut illum distinctio praesentium minus libero. Hic a provident soluta dolores odit. Odit voluptatem ratione. Laboriosam deleniti eveniet quos nisi quaerat totam quam dolorum.

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