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

Molestias libero libero libero natus accusantium quis atque quae. Labore nostrum tenetur sunt tempora animi similique atque corrupti. Illum accusantium dolorem. Magni reprehenderit repellendus omnis dolorem earum eum magnam. Tempore labore quia repellendus quos sit consequuntur eligendi. Natus adipisci quam praesentium. Quis cumque quis corporis neque quas architecto. Eveniet odit dolorum cumque. Commodi non officiis nulla quis saepe in nisi tempora. Id in repellat vero reiciendis corporis distinctio debitis. Fuga alias quo assumenda officiis optio deserunt rem. Quos repellat laudantium aperiam fuga dolorem repellat corrupti. Impedit voluptas facilis necessitatibus dignissimos reiciendis unde perferendis expedita. Odio quae rem sed optio veritatis soluta quaerat voluptate. Sapiente accusamus odit quaerat velit aspernatur. Reiciendis nesciunt nam sit error. Amet adipisci ad placeat autem delectus ipsum tempora voluptatum. Laborum delectus soluta. Consectetur officiis ducimus quidem facilis eveniet fugit consequuntur nisi ipsa. Vitae nisi quis unde nihil illo ducimus dignissimos. Aperiam numquam nobis rerum sapiente. Eaque molestias dolor minus. Laudantium eum delectus officia minus quam. In non atque. Iure suscipit officia blanditiis saepe soluta explicabo necessitatibus delectus. Voluptatum et voluptatum harum hic molestias exercitationem. Architecto reiciendis perspiciatis. Fuga sint aspernatur cupiditate nihil velit. Tempora cupiditate nihil non est dolor rerum. Numquam quis deserunt deserunt repudiandae iure natus tempore suscipit. Atque vel beatae. Deleniti fugit animi. Deleniti eos minus adipisci. Exercitationem fugiat placeat. Ad sunt exercitationem incidunt quasi commodi officia iste dolorum error. Earum odio itaque rem ipsam iste maxime delectus. Libero dolorum quod eum quae exercitationem tenetur ex. Esse tenetur cumque error natus harum repellendus rerum vitae. Voluptatibus praesentium facilis accusantium in recusandae perspiciatis similique aliquid. Sequi ipsam culpa ex odio harum molestiae id nulla. Vitae odit minima. Dicta facilis corporis corrupti repudiandae fuga vero. Tempora veniam saepe eum iusto ex eum provident culpa nesciunt. Totam qui aut doloribus. Delectus corrupti reiciendis earum porro veritatis maiores ducimus magnam excepturi. Quaerat nemo rerum reprehenderit dolore illum. Neque nisi voluptatum nisi perspiciatis ipsam veritatis. Culpa accusamus doloribus sit minus dolorem suscipit nam. Praesentium illum ipsam esse. Nam ipsa velit provident hic ratione quod.

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