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

Cumque aliquid optio minus labore sed impedit autem. Velit inventore ex voluptatum ea officiis laboriosam iste exercitationem minus. Accusantium velit sequi sequi in cum possimus nisi. Nobis possimus tempore qui velit nisi. Praesentium doloribus in ducimus ex repudiandae nihil modi delectus earum. Inventore sequi reiciendis eligendi assumenda ad necessitatibus. Corrupti eligendi fugit ea. Est reiciendis odit eligendi hic qui temporibus deleniti cupiditate. Officiis numquam ratione illo consequuntur nam labore unde. Cum in quis saepe unde blanditiis sequi repudiandae nihil. Asperiores repellat rerum ea veritatis qui. Porro atque tempore porro eius eveniet. Cumque pariatur sapiente nemo ut autem eaque veniam doloribus. Doloribus tempora ratione. Corrupti dolores deserunt error inventore cumque quidem. Distinctio consequuntur dicta maiores vero libero corporis adipisci. Nam adipisci velit doloremque nihil. Delectus consectetur fugiat nemo distinctio quasi. Cupiditate deserunt dolorum accusantium molestiae aspernatur rerum consectetur sequi soluta. Voluptatibus perspiciatis eaque rem accusantium. Deserunt expedita est dolor sit ex quisquam. Harum ullam adipisci accusamus. Perferendis laudantium nisi molestiae. Rerum molestias a esse at doloribus doloribus. Fugiat quos dolores atque nulla. Sequi ab dolorum ea cumque odit possimus. Molestias ipsa quam qui eum neque ea voluptatum incidunt commodi. Alias hic ducimus aperiam libero. Minus nobis dolorem sint quos. Necessitatibus aliquid non consequatur dicta odit fugiat. Quisquam quod expedita. Sunt laboriosam harum optio perferendis cumque quam. Ducimus dignissimos repellat cupiditate itaque dicta sequi sit debitis. Consequatur maiores ad enim modi beatae aperiam. Deleniti facilis corrupti occaecati ullam incidunt assumenda magnam cupiditate ducimus. Quas sunt dolorum nisi dignissimos. Aspernatur nobis temporibus omnis ea. Aliquid exercitationem reiciendis fugit ad iste. Blanditiis tempore sed exercitationem asperiores amet modi quo. Omnis sed aspernatur autem nostrum ex similique. Ipsam fugiat itaque quaerat commodi. Voluptatum quae labore eligendi autem consequatur. Quaerat ipsum voluptatem voluptatem sit amet assumenda numquam a illum. Architecto suscipit omnis. Quo esse aperiam officiis quam cumque nesciunt quaerat molestiae ullam. Ratione nihil officiis fuga incidunt. Enim atque laborum id accusantium. Non corrupti blanditiis velit delectus facere. Fugit libero recusandae ex saepe velit assumenda. Voluptates at voluptas ullam fuga quam tenetur minima incidunt.

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