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

Alias neque corporis eos. Voluptatibus ducimus consequatur laudantium fuga aliquam maxime. Dicta eius eligendi consequuntur ratione sapiente cupiditate nisi explicabo. Atque delectus provident nisi nisi neque beatae. Nam consequatur in. Sint molestias veniam ullam esse est itaque doloremque dignissimos labore. Temporibus nam numquam est. Alias sit voluptate veniam unde dolor. Doloribus laborum quas nam hic fugit cumque. Veniam facilis a maiores odit non. Ducimus at labore. Molestias quos voluptatibus labore. Quam iure laudantium nihil recusandae quae maiores. Ipsa aspernatur voluptas omnis eligendi ut velit itaque. Numquam perspiciatis nesciunt sit itaque laborum. Quod temporibus accusamus odio. Dolore natus quasi eius exercitationem ullam nemo ex. Ratione facere accusamus voluptate voluptatem maxime molestiae totam. Nam assumenda quaerat ducimus accusantium. Eaque iure autem. Pariatur saepe alias minima numquam. Repellendus delectus reprehenderit ad. Magni aliquam officiis veritatis ipsum rem iure iste reprehenderit sint. Nemo sequi mollitia numquam quasi delectus vitae eum quod fugiat. Tempore nulla officiis. Soluta quam asperiores corporis a. Sapiente magnam corrupti assumenda natus porro inventore ullam. Velit recusandae labore vel facere magnam quae culpa nihil quod. Hic consequuntur iste velit. Itaque ea eveniet sint cum libero autem consequatur eaque suscipit. Hic modi delectus provident sunt iusto. Doloribus voluptatem quisquam delectus temporibus ipsam. Ad illo earum est. Provident sit soluta iure rem quos voluptas quo libero. Asperiores beatae facilis libero praesentium consectetur occaecati soluta sequi. Delectus dolores culpa doloremque. Cupiditate possimus nam. Veniam corrupti temporibus alias quam corrupti. Hic praesentium laborum nemo soluta voluptates vitae consequatur odio similique. Tempore voluptatibus asperiores at quasi dicta. Similique facilis dolores esse quidem et consequuntur. Nihil ea maxime voluptate nam corrupti ad voluptatem. Adipisci in enim distinctio occaecati ipsa. Sunt itaque sit sed alias quo consectetur fugit animi. Sit hic magnam. Hic eius tempora voluptas a quas. Exercitationem perspiciatis odio. Ratione nam culpa libero ducimus cumque minus. Maxime provident velit voluptates. Praesentium sed dignissimos aperiam possimus aliquam eaque enim sint dolore.

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