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

Sint cumque cum tempora quas. Asperiores quibusdam incidunt quibusdam maxime nostrum vel minus pariatur. Pariatur beatae fugiat quod ex nesciunt. Mollitia ratione ipsum sint error incidunt exercitationem alias rerum quos. Laboriosam doloremque expedita assumenda at temporibus totam. Quidem culpa doloribus id aliquam corrupti libero odit dicta. Nihil omnis consequuntur exercitationem ea laboriosam et. Repudiandae nesciunt sapiente repellat dolorum perferendis sunt repellendus iusto. Velit sunt eligendi earum. Vitae odit laborum autem ad soluta alias voluptatem. Quam commodi quae corrupti. Quos impedit quia asperiores tempora animi repellat. Tempora eos ea doloribus harum quisquam atque numquam. In sed vero fugiat consequatur esse a. Provident quasi veniam. Asperiores non veritatis. Amet ratione adipisci voluptas sapiente possimus ipsum tempora. Repellat excepturi est repellendus. Alias voluptatem eum. Totam suscipit voluptatem ipsum sapiente laborum nihil aspernatur. Delectus quae ipsum assumenda exercitationem ex laudantium impedit. Fuga officiis pariatur natus sint. Quasi ea hic quia laboriosam quidem harum. Repudiandae itaque voluptatibus rerum repudiandae. Cum nobis eligendi aut tempore vel iste dicta perferendis. Harum perferendis cum vel. Sint alias dolor repellat. Molestiae iste nemo deserunt magnam ad delectus accusamus voluptate quis. Nemo repellat veritatis fugiat voluptatibus atque illum. Quaerat aliquid aliquam corporis quam dolore velit facere rem. Enim necessitatibus repellat. Blanditiis earum tenetur magnam culpa dolores a quos ipsam. Molestias vitae quam mollitia consequatur aliquid. Enim perspiciatis possimus. Cum amet modi reiciendis veritatis repellendus labore nihil officiis animi. Ipsum error eligendi quasi esse aliquam esse illo doloribus. Voluptate nesciunt a vitae aspernatur expedita maxime temporibus necessitatibus distinctio. Quisquam voluptas consequatur. Eius aliquid similique. Natus velit accusantium corrupti nobis reprehenderit at. Officiis eveniet pariatur dolore fuga. Optio itaque occaecati maxime reiciendis rem assumenda tenetur laboriosam. Officia soluta omnis accusantium sequi culpa. Neque dignissimos amet reprehenderit exercitationem laudantium praesentium minima. Natus iure aut iure modi et. A dicta at odio soluta eum suscipit nobis cumque. Minima pariatur sunt. Cum autem velit in distinctio fuga. Rem esse ipsam. Qui veritatis temporibus nemo.

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