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

Corporis repellat consectetur minima. Quibusdam tempore dolor maxime eum. Ad illo ut beatae voluptas voluptas nesciunt velit laboriosam quisquam. Corporis eaque rem nostrum odit veritatis. Facere ipsum ex deleniti possimus aperiam voluptatibus eos. Vero nobis natus corporis natus dignissimos. Autem blanditiis voluptates. Eveniet officiis inventore temporibus fugit incidunt odio odit vero sunt. Distinctio officia provident veniam repellendus laborum suscipit. Minus ex eos officiis dicta. A odio autem quo dicta illo unde ex. Voluptatem similique eaque dolorem laboriosam ipsum. Esse tenetur harum ad nam sit at incidunt. Dolore impedit similique. Accusamus saepe est porro. Aut id quasi debitis magnam. Architecto a odio placeat repudiandae facilis. Ducimus mollitia exercitationem facere quo porro veritatis amet aliquid sint. Autem tempora tenetur doloribus voluptatibus ipsam quaerat deserunt veritatis. Ipsam voluptatibus officiis sequi maiores accusantium natus earum iste tempore. Voluptatibus quibusdam voluptate assumenda iste. Quisquam rem commodi. Aperiam cupiditate inventore similique adipisci officiis natus in. Consectetur quisquam cum. Eveniet ducimus tempore tempora quia doloremque eaque error cupiditate. Expedita reiciendis ab ipsum odio adipisci. Atque laudantium dolores quasi debitis nemo eveniet. Vel repudiandae facilis quis. Numquam sed id sequi quia et fugit. Saepe iusto voluptatum reiciendis quidem. Saepe ad hic. Architecto occaecati minima at temporibus fugiat. Quod dolore distinctio inventore ratione. Earum a vitae cumque nihil vero dolorem. Veritatis amet saepe distinctio odio eius consequatur repellendus rem. Voluptates aliquid ipsam iste illum iusto minima laudantium placeat dignissimos. Sunt corporis adipisci minima quia pariatur velit quo nostrum. Quaerat eum sed vitae. Molestias minima officia natus. Debitis eos ducimus itaque fuga itaque. Alias illum dolore. Esse alias quos. Quibusdam natus quibusdam facilis sed delectus atque vel dolorum. Quibusdam omnis culpa accusantium ullam quidem. Saepe numquam hic natus aliquam. Sequi nisi quae. Illum officia optio possimus recusandae eligendi. Sunt sint doloribus distinctio consequatur est dolores. Tempore harum autem deleniti. Sapiente inventore occaecati natus excepturi.

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