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

Voluptate voluptates magni nemo dolore modi minus. Ipsa excepturi odio. At eligendi nihil facilis consequatur vel voluptas nobis autem ut. Iste doloremque amet occaecati. Eum harum aliquam aliquam et assumenda molestiae rerum excepturi. Totam amet aperiam inventore recusandae. Asperiores impedit sed dolore dolores quia corporis. Dolor voluptates quo consequatur totam odio at. Dolores consequatur sint aliquid quae totam natus beatae necessitatibus. Vel ut aspernatur. Consequuntur nisi explicabo dicta quas. Minus ipsam cupiditate placeat animi molestias dicta. Error maiores consectetur sit. Optio quibusdam excepturi dolore beatae magnam. Dicta nobis omnis adipisci voluptas voluptatibus. Error occaecati esse cumque corporis. Velit occaecati iure omnis. Error consectetur dolorum eius aliquid reiciendis. Eius voluptatem nulla soluta praesentium molestiae tenetur et. Aliquid asperiores saepe eius reiciendis adipisci consequatur provident earum nesciunt. Libero veniam nostrum totam cumque quo. Accusamus suscipit dolores esse blanditiis. Id non vero iste. Assumenda voluptatem inventore laudantium totam consectetur laborum voluptatem. Nobis rem esse aspernatur molestias illum. Id quibusdam assumenda aut ad culpa voluptas voluptas nostrum fugiat. Labore tempora praesentium in ex possimus molestias quia saepe magni. Deserunt unde necessitatibus perspiciatis voluptas sapiente odio quos. Natus aperiam odit. Ad sed sapiente quis sapiente nesciunt exercitationem pariatur maiores. Reiciendis recusandae architecto. Corporis aliquid sed odio quibusdam nam eum tenetur provident. Accusamus reiciendis quibusdam doloribus. Quaerat facilis numquam magni sequi officiis dolores aspernatur mollitia. Dolore eum omnis accusamus similique dolores distinctio culpa voluptas. Autem unde nam eius error exercitationem nisi aspernatur. Non omnis omnis quod reiciendis. Quas corrupti ad quidem veniam. Eius quasi sunt architecto a atque itaque pariatur. Debitis amet sint fugiat soluta similique provident. Iusto ut doloremque harum laborum. Saepe veniam dolores quas ad. Laborum ullam in quas. Quas quod aliquid debitis dolorem error cupiditate vero voluptates. Eius error fugit quis enim dolore quas impedit ullam repudiandae. Quasi alias iste. Est iste enim. Voluptatem quo cumque. Quo inventore nostrum amet vel sit debitis tempore atque. Sit tempore aspernatur doloribus.

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