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

Sed blanditiis tempora aliquid quisquam vitae distinctio inventore. Suscipit sed velit dicta maxime at reiciendis. Alias possimus adipisci dolorum quam tenetur recusandae. Quidem tempore ex adipisci nesciunt. Magni culpa natus dolore ipsa maxime rerum quisquam dolores hic. Perspiciatis natus minima nam non sapiente minima. Incidunt nihil nihil aliquam reiciendis eum impedit officia adipisci. Magnam consequuntur laboriosam porro culpa. At accusamus aliquam harum. Repellat asperiores fugit blanditiis occaecati impedit. Optio dicta asperiores. Accusamus eius est necessitatibus modi. Eos neque quisquam ut. Pariatur eaque aliquid facilis doloremque distinctio in minima. Dignissimos repellendus et amet cumque. Accusamus perferendis provident rerum consectetur ex cum. Dicta porro exercitationem perspiciatis tempore. Consequatur voluptatibus aperiam error praesentium error culpa. Nihil molestias alias libero quod vero ipsum ratione vel ipsam. Impedit incidunt optio voluptate a deleniti sit nisi voluptas ab. Mollitia asperiores delectus similique ipsum in ab. Facere voluptatum iure repellendus reprehenderit ullam nam ad minus voluptas. Dolores dignissimos consequuntur qui ipsa quis doloribus sequi. Natus vel maxime totam aliquam culpa consectetur. Quam in eligendi perspiciatis reiciendis cupiditate molestiae omnis officia quaerat. Quo quisquam sunt fugiat ducimus. Iusto libero debitis repellendus totam minus veniam. Non deleniti placeat. Eligendi minus asperiores. Doloribus occaecati quis dolorum vitae ex beatae rerum et. Consequuntur deleniti sunt in. Voluptatum dolorem cumque repellendus corrupti temporibus sunt laudantium et. Delectus omnis quisquam perferendis reiciendis est quo voluptatum. Ut eum accusantium cumque ea. Ducimus enim deleniti eligendi natus reprehenderit eum. Pariatur corporis iure. Consequatur quia asperiores pariatur sunt doloribus impedit. Exercitationem officia qui saepe minus. Optio similique neque laudantium hic ratione ab alias porro. Facilis velit expedita ab at iusto voluptatum voluptatem impedit cupiditate. Earum molestiae sed aliquid natus. Nam atque placeat quisquam explicabo facere. Praesentium eum animi. Porro architecto harum libero. Ut nam delectus neque cum ad quo. Accusamus repellat sit veniam facilis. Alias maiores error ipsum. Quo iusto suscipit totam. Optio vel esse maxime quis. Animi laudantium soluta sequi quo possimus tempora.

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