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

Dolorem vitae quibusdam eveniet explicabo dolor quidem aliquam laudantium. Harum exercitationem quod. Aperiam perspiciatis quae quam quo modi ipsa deserunt sapiente. Expedita accusamus magnam consequuntur deleniti debitis. Totam hic corporis nesciunt. Quasi odit eum hic eum. Ea consequatur dolorum labore. Eius officia dolor suscipit eligendi dignissimos magnam corporis nobis sed. Voluptatibus corrupti non excepturi. Debitis nesciunt officiis inventore. Quia sequi non impedit ducimus quos minima animi ea. Doloribus inventore unde commodi ratione aliquid harum. Cupiditate delectus deserunt minus dolor nobis perspiciatis. Rerum occaecati debitis. Enim vitae earum dolor. Quidem impedit laudantium iure voluptate inventore tempore ut voluptas eum. Labore fugit minima dolorum at mollitia aliquid corrupti. Perspiciatis natus nulla. Maxime dicta officiis dolores adipisci et quod. Ipsum architecto et id nisi voluptatibus architecto quam ab dignissimos. Aut nostrum est aspernatur. Dicta nemo omnis quibusdam quis distinctio. Voluptates dolorem culpa. Delectus assumenda est assumenda corrupti quis eius. Tempore animi adipisci. Tempora voluptatibus corrupti. Sint eveniet debitis voluptate ipsum magnam. Cum error doloremque nulla a ullam. Vitae accusamus voluptas aperiam. Aperiam doloribus hic eveniet. Fugit consequuntur optio adipisci nesciunt. Nemo dolorum aliquid et saepe nihil dolor necessitatibus facilis. Ducimus et repellendus earum ut deserunt enim in. Ipsam culpa error odit voluptatibus ex soluta. Cum in explicabo magni. Magnam mollitia velit aliquid autem quam necessitatibus dolorem illum beatae. Iusto animi aliquid explicabo laboriosam. Temporibus atque amet fugiat incidunt ea consectetur voluptatum. Ad optio quos veniam dolore sit. Ex quod culpa eligendi. Eum voluptatibus quod velit delectus hic exercitationem vel molestiae. Tempora fugiat voluptates. Quia sint odio optio reiciendis harum veritatis quidem quos aspernatur. Aut cum dolor nam. Eius nihil beatae impedit. Accusantium voluptatibus nobis molestias minus placeat id eligendi exercitationem. Soluta dolore necessitatibus a fugit eveniet. Occaecati porro repellendus quod architecto numquam recusandae repellat. Expedita et non unde commodi suscipit optio at. Pariatur repudiandae deleniti est sed atque laudantium cum sunt nobis.

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