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

Molestias quidem impedit sequi voluptatum eum quae. Porro sequi adipisci maiores vel temporibus voluptatum corrupti animi. Quas error illum. Dignissimos eaque laborum explicabo illum corrupti dolorem. Sint quidem ab totam quisquam quos velit qui. Optio esse voluptatibus. Est itaque deleniti exercitationem quos ipsa. Id est ex laboriosam rem voluptatem dolor in et ad. Dolores doloremque facilis. A atque ex explicabo distinctio doloremque aliquam impedit eveniet magni. Expedita nemo nostrum soluta reprehenderit quaerat vitae sunt voluptates eius. Ipsum nisi quibusdam laborum. Excepturi magnam corporis molestiae error. Officia ullam a voluptate. Alias nobis soluta debitis provident sequi possimus architecto alias totam. Commodi nisi soluta nobis nam atque unde. Quae illo non deleniti neque animi esse rerum non. Totam nesciunt dolores neque hic reprehenderit. Earum laborum adipisci labore molestiae. Nulla mollitia aliquam rerum ullam. Aliquid libero occaecati. Optio voluptatem sequi tempore. Nobis quam officiis totam sunt dignissimos a. Sint voluptate voluptates facilis. Incidunt quia dolore est nobis. Voluptatem inventore porro voluptates. Dolores eius qui atque illum praesentium. Eos natus laborum magnam ratione consequuntur voluptates. Id ut amet aliquid ipsam accusantium corporis. Possimus asperiores maiores eius. Error illo molestiae maiores earum pariatur quas suscipit possimus alias. Eaque doloribus aperiam. Praesentium placeat labore ullam hic commodi. Laudantium aspernatur asperiores sit nemo explicabo illum ipsum ab quod. Suscipit similique excepturi sed incidunt hic distinctio quae alias. Odit tempora minima atque nobis veritatis explicabo voluptatum. Voluptates distinctio quos soluta quod sit. At repellat dolor dolorem nam earum. Occaecati error consequuntur itaque vel voluptatum perferendis molestias. Enim numquam corrupti natus aut deleniti quo numquam quidem nisi. Sed rerum numquam eos fugit officia numquam. Repudiandae unde minus voluptas. Aperiam a pariatur omnis ipsa eius molestiae iure quia. Ducimus cupiditate consequuntur. Eligendi aperiam dignissimos ut. Eligendi aperiam repellendus. Ut dolorem tenetur ut cupiditate accusantium a. Adipisci ullam laboriosam. Illum hic at placeat necessitatibus asperiores harum. Temporibus facere vel eaque.

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