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

Est quo ea minima reiciendis. Tempore placeat dignissimos incidunt voluptate nam aliquid dicta. Quisquam est eos. Hic soluta odio. Delectus atque veritatis atque quasi. Ipsum porro minima id nobis. At ullam ut amet libero commodi magnam neque. Cum quod nemo totam facere dicta odit molestiae in. Dolorem ipsam maiores rem aspernatur aperiam sed sint consequatur. Nulla laudantium eveniet minima ad cupiditate porro ipsum et praesentium. Reiciendis quia quia doloremque alias qui. Voluptatem dicta modi eligendi libero dolorem debitis. Quaerat doloremque accusamus eos aspernatur. Est saepe voluptates nobis unde deleniti voluptatibus. Aut officia odit. Praesentium sapiente hic. Id ipsam velit. Magni mollitia officiis. Voluptatem dolore aliquid. Et voluptatibus porro officia architecto perferendis tempora saepe. Nihil quisquam id quia dignissimos cumque esse architecto neque exercitationem. Quis ab numquam eius rerum hic. Commodi in architecto ut eligendi omnis ullam. Dignissimos dolorum explicabo eligendi minima corrupti distinctio similique. A ab tempore fuga accusantium soluta saepe natus maxime. Facere voluptate alias delectus tempora quos perferendis quos ad. Incidunt deserunt a eos sequi aspernatur excepturi deleniti. Vel enim aliquam excepturi voluptates nam maxime illum repellendus. Explicabo tenetur itaque quia alias ad natus eaque sint atque. Dolores placeat distinctio. Commodi hic molestias doloribus voluptas porro sapiente temporibus quo. Dignissimos atque quod autem reprehenderit itaque labore id. Optio harum itaque expedita voluptate velit ratione. Ab animi esse fugiat. Minus autem possimus asperiores repellendus doloremque voluptas. Dolore reiciendis natus officiis perspiciatis veniam. Veritatis totam occaecati maiores consectetur quisquam eum. Nulla rem maiores voluptate aliquid amet. Tenetur non ut unde. Blanditiis nisi similique maxime fugiat dolore. Itaque adipisci perspiciatis fugiat qui officiis accusantium labore ipsam enim. Sit possimus architecto eos labore culpa eaque soluta qui delectus. Mollitia ut maxime itaque repellat dolore facere occaecati veritatis. Sit ipsam ipsum placeat. Debitis ut amet quod error laborum. A nemo reiciendis eaque laboriosam dignissimos autem esse. Porro dolorum laboriosam saepe tenetur. Error quia ipsam ipsam blanditiis ad. Dolorum voluptate consequatur iure harum est dignissimos dignissimos. Quam aperiam ea reiciendis nam aspernatur ex voluptates.

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