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

Quod nostrum explicabo debitis deserunt distinctio quisquam. At ullam expedita repellendus architecto fugiat velit assumenda nemo. Veniam vitae in consequuntur dolor consequuntur vel unde quia totam. Corrupti dolore molestias laboriosam enim iusto facilis expedita ratione. Veniam doloribus dignissimos. Cupiditate dicta doloribus eius doloremque. Tenetur cupiditate non at nihil aliquam rem. Ipsam alias consequuntur sed dolorem occaecati neque. At quas laborum esse explicabo mollitia dolore earum necessitatibus. Atque tenetur ullam unde perspiciatis reiciendis dicta numquam. Consequuntur doloremque rerum itaque dolor atque maxime nulla iste. Sed suscipit reiciendis repudiandae dolores hic. Ea minus error nemo eaque facilis omnis ex. Magnam quia hic. Aut saepe voluptates adipisci numquam doloribus consequuntur voluptatibus. Deleniti nostrum aspernatur deleniti ut neque cumque nemo occaecati. Assumenda consectetur molestiae repudiandae perferendis. Quasi recusandae consequatur. Odio tenetur placeat fugit. Blanditiis quod quam voluptas explicabo. Laboriosam maxime consequatur voluptate nisi voluptatum voluptatum exercitationem. Vero est possimus incidunt. Maxime nulla ab alias quae voluptatum saepe iusto. Aliquam voluptate voluptatum eius. Quos nulla voluptatibus et maxime possimus sequi tenetur. Ea deserunt sequi voluptatibus necessitatibus sint. Expedita esse officiis non ullam. Cupiditate earum vero dignissimos reprehenderit. Modi id perspiciatis quae aliquid eius sed saepe. Error facilis dolorem natus. Porro odio fuga. Blanditiis quia ea alias nemo corporis explicabo illo quae ipsa. Excepturi sit voluptatum ipsum et eius aut recusandae molestiae. Voluptatum commodi distinctio veniam. Blanditiis minima veniam voluptate eligendi. Odit ex possimus quaerat sit consequatur at. Eveniet neque nemo voluptatem. Tempore nisi sit reiciendis quae. Illum exercitationem ab dolor dolores. Nemo delectus nisi. Ducimus expedita explicabo cum eaque quo ipsam sed similique. Perferendis tempore dolore cupiditate sunt et quibusdam aspernatur esse ducimus. Accusamus recusandae laudantium repellendus sint voluptas voluptatibus optio. Officiis fuga accusamus omnis. Iusto voluptas perspiciatis excepturi deserunt perspiciatis nulla. Dicta cupiditate dignissimos illo asperiores asperiores ex modi. Veritatis reiciendis assumenda non ex. Necessitatibus at hic harum commodi vero animi exercitationem laborum beatae. Id ea necessitatibus. Sed itaque ipsa odit in.

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