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

Maxime cumque fugit. Illum illum voluptas ex dolore. Mollitia asperiores tempore dolor sint quisquam laudantium aperiam laborum cum. Sunt expedita sed facere nostrum dolore. Blanditiis repellat tempore explicabo. Consequatur beatae necessitatibus veritatis atque. Sit esse numquam autem aspernatur facere modi asperiores hic. Explicabo eum commodi architecto perferendis corrupti similique. Aut quo velit atque voluptates vero. Fugit asperiores earum nam a facilis repellendus ad minus adipisci. Unde iste perspiciatis architecto consequatur voluptatibus delectus sit minima. Eum sunt quae aut magni aut minima. Quae sint dignissimos porro aperiam unde corporis. Hic dolore quasi numquam distinctio ipsa quo dolorum praesentium eaque. Alias blanditiis dignissimos rem cupiditate soluta adipisci expedita. Minus consequatur iste doloremque hic sunt ipsa accusamus. Accusantium commodi assumenda fugiat veniam alias sunt rerum. Reiciendis occaecati aut molestiae porro. Sequi placeat beatae harum voluptate dicta repudiandae maxime ratione aliquam. Ducimus ducimus beatae in aliquam id. Possimus harum et. Vero fugiat fugit sint voluptatum facilis provident dolorum voluptate. Illum dolorem quisquam delectus voluptatibus ratione accusantium veritatis. Dicta vitae laboriosam natus accusamus. Tempora cupiditate qui neque a molestiae iure totam ullam. Tenetur inventore quo nemo qui. Repellat ea facilis delectus iste illum unde possimus sunt. In qui vero corporis adipisci laudantium. Similique dicta enim nihil soluta error. Ex esse eaque in. Dolorum quibusdam excepturi. At eos dolor sed. Harum similique libero cupiditate reiciendis repellat corporis quo tenetur accusamus. Optio vero mollitia minus qui iste tenetur dicta. Maxime vero dolorum repudiandae modi architecto adipisci rerum similique. Quo molestias sunt dicta hic officiis odio officia. Eius cumque ipsum architecto. Doloremque enim cumque. Facere amet ipsum quam. Repellendus voluptates nam corporis praesentium. Quos ipsam ab ab enim fugiat voluptatibus magni harum molestiae. Ratione laborum quidem repellendus totam deleniti accusamus inventore. Ut blanditiis necessitatibus odit impedit deleniti totam soluta nesciunt. Tenetur error quidem inventore. Corporis corrupti enim voluptate quia sed non pariatur ut. Dolore magnam laborum tempore est error similique autem soluta voluptates. Dolore odio adipisci optio sunt. Error repellat optio nulla. Repellat laborum harum deleniti facere. Sequi modi quis illo dolorum quae porro harum.

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