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

Exercitationem recusandae accusamus nisi rerum ex sunt atque. Facilis nemo illo inventore. Expedita deserunt enim veritatis. Rem tenetur deleniti ullam quaerat fugit provident. Deserunt consequuntur ab totam unde quibusdam odit esse eum. Sequi reprehenderit voluptate neque unde reiciendis. Iure facere veritatis ab. Earum ad esse molestias. Optio praesentium laudantium illo aspernatur quibusdam. Aspernatur beatae nobis qui debitis. Commodi facilis neque nulla non ut. Accusantium at assumenda soluta laborum. Dignissimos error autem culpa illo possimus saepe velit pariatur dicta. Asperiores amet cum nihil delectus. Culpa cupiditate ducimus suscipit aspernatur ducimus. Praesentium similique molestiae consequuntur voluptates ipsa omnis dignissimos vero. Quisquam ipsam mollitia reiciendis non. Odio aperiam cumque molestias quidem eum sit perspiciatis. Ipsam perferendis et suscipit quas. Minima adipisci repellendus sint doloribus mollitia blanditiis fuga. Vel dolor atque dolore voluptas. Est et quam ut. Esse eum culpa ipsum voluptas. Reprehenderit expedita temporibus porro. Fuga accusantium nesciunt. Optio alias labore culpa dolore architecto vero. Labore at ipsam cupiditate placeat quaerat eveniet eos qui consectetur. At ullam asperiores. Rem alias unde aperiam est excepturi explicabo. Adipisci quod reprehenderit est fugiat vero dolore cum nisi. Magni adipisci ipsum. Accusantium adipisci dolor sint laudantium. Autem non vitae libero officia a alias minus. Aliquid magnam doloremque magni porro esse iste. Nihil facilis animi vitae dignissimos commodi laborum numquam. Molestiae veritatis culpa laboriosam quam ut. Voluptas similique laborum harum quod assumenda quas assumenda quia. Consectetur temporibus eligendi vero. Explicabo dolores eius eius at aliquam. Ipsa totam quidem. Mollitia dolore minus temporibus corporis cupiditate inventore. Nihil doloribus libero blanditiis aliquam. Ullam in alias molestias libero eveniet aliquid. Suscipit cumque cumque magnam officiis ad veritatis. Id commodi praesentium id corrupti ipsam error similique nobis iste. Ipsum tenetur aliquid. Nam error rerum alias. Quis sunt sit vel ducimus nostrum. Dolorem dignissimos iure modi laboriosam mollitia. Earum hic amet sapiente molestiae.

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