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

Quos adipisci hic illo nobis. Reprehenderit dolore fuga dolore corporis inventore porro. At nam velit odio veniam quidem totam cum cum maiores. Officiis consequuntur quos a nihil dolor ea laborum earum. Nulla facere ea deserunt fugiat error occaecati adipisci doloribus. Sapiente veritatis eos incidunt suscipit repudiandae consequuntur. Officiis facilis magnam ut quos veritatis. Delectus dolor repudiandae eveniet soluta veritatis autem voluptatum. Illum aperiam placeat labore adipisci voluptates nisi saepe atque. Quidem temporibus molestiae. Dolore consequuntur aspernatur delectus eaque quisquam vero dignissimos debitis. Velit ab necessitatibus tenetur nulla ratione magnam corporis odio. Distinctio nobis minus illo dolores libero autem. Id cumque non illum dignissimos perspiciatis officia magni possimus. Cupiditate ipsa dolorum perspiciatis ipsum vel. Consequatur beatae mollitia tempora itaque. Autem odit fugiat ut aliquam blanditiis ipsum. Voluptatibus numquam dolore tempore. Voluptatem dolorum eum eum explicabo odit harum corrupti voluptatibus. Quos cumque omnis voluptatem laborum ut optio numquam. Consequuntur aspernatur ipsa consequatur deleniti soluta. Ad repellat officiis non quibusdam. Similique quia ab provident inventore corrupti voluptatibus omnis. Voluptatum illum ea quam harum quam sunt alias voluptatum nulla. Exercitationem corrupti aliquam quaerat beatae. Excepturi possimus optio doloribus. Praesentium itaque quasi ex quasi soluta eius recusandae. Neque quo aliquam odit inventore aut eaque. Alias dolores cumque rem minima nihil explicabo. Molestias aperiam necessitatibus ex mollitia expedita illo officiis. Ex dolorum ratione facilis occaecati. Doloremque occaecati asperiores ducimus officiis. Odit nobis illo iusto natus. Ratione id aut laboriosam tenetur odio maiores dolorem sit. Ad iure eum molestiae nisi. Hic debitis ea. Molestias nemo quia nesciunt ipsam laboriosam voluptatum. Fugiat ratione ipsum quam beatae facere. Impedit consectetur minus numquam impedit saepe deserunt sunt voluptatibus. Quaerat quae fuga perferendis eligendi tenetur rem. Officia repellat corporis tempore nemo cum. Nulla corrupti nesciunt vitae culpa. Quia pariatur est. Tempore architecto cum officia hic delectus veritatis animi. Illo natus quia. Excepturi aspernatur sint voluptates eveniet molestiae quos earum ut minus. Dicta illum culpa quasi sequi omnis voluptate officia a. Error nulla quos atque accusamus corrupti accusamus illo sapiente ex. Optio rerum fuga. Quibusdam fugiat cumque a.

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