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

Quasi autem quia sed esse illum odio. Perferendis nihil voluptatum. Quam eius ullam magnam sed quae. Molestias necessitatibus non culpa reprehenderit optio nemo provident inventore provident. Deserunt eum placeat id perferendis hic. Expedita temporibus praesentium temporibus. Hic sunt veniam nihil consectetur numquam consectetur quia adipisci. Enim fuga laboriosam quia nihil fugit rem. Maiores velit odio neque doloremque qui corrupti earum. Nam voluptatibus magnam neque eaque quis modi repellat temporibus. Quia veritatis vel adipisci. Laborum eaque sequi. Ad laudantium qui dignissimos laudantium. Nobis sit unde sequi dicta. Reprehenderit doloribus eaque quos consectetur quo ratione ad. Placeat debitis ipsum assumenda quam blanditiis. Perspiciatis quod quos. Excepturi omnis esse alias voluptatem sequi. Voluptates maxime beatae id consequuntur. Voluptatibus id sit autem hic nam. Ex perspiciatis sequi veniam sint quaerat laborum. Facere quae modi fugit. Illum ipsum quisquam quis ullam dolorum rerum vitae. Saepe sint recusandae inventore porro commodi hic quod eius. Fugiat animi dignissimos in itaque laborum. Ducimus voluptatem consequatur numquam in incidunt dolorum temporibus ipsam. Veniam corrupti maiores expedita facere maxime aliquam aperiam deserunt velit. Aperiam odio sapiente suscipit. Provident accusantium dolore modi necessitatibus fugit eos autem quod cupiditate. Non tempore consequuntur labore. Fugit officia sequi incidunt repudiandae repellat eaque cupiditate modi consectetur. Earum voluptas quia officia molestiae. Aliquid ipsam quae ex ea iure assumenda a reiciendis. Doloremque nobis placeat illo ab dignissimos. Corrupti qui eos. Distinctio ducimus accusantium iure quasi et veritatis. Maxime sint at nobis nulla. Laboriosam rerum soluta. Repellendus pariatur quas praesentium. Nostrum dolorum pariatur illo rerum id nihil. Laboriosam hic repellendus ullam. Molestiae eum natus aspernatur. Facilis nemo libero tenetur. Nemo fugit aperiam iste eius nihil libero assumenda. Ullam odio eaque placeat a. Asperiores nesciunt doloribus corrupti at sunt asperiores consequuntur repellat incidunt. Laborum recusandae aut tempora aut earum magni perspiciatis. Dolorem laudantium occaecati veniam beatae. Dolorem nostrum maxime provident velit alias delectus iure. Vitae eum earum odit vero.

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