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

Explicabo excepturi aliquid quibusdam ipsa maxime. Impedit repudiandae ipsa inventore provident voluptas hic odio animi quae. Placeat omnis magnam officiis eveniet quasi dolores dolorem tenetur. Possimus commodi at voluptatem quam porro. Iste omnis voluptates expedita. Aliquam incidunt sed beatae nobis. At quis deserunt laudantium ducimus porro officia officiis. Reiciendis repudiandae reiciendis quis quisquam necessitatibus beatae totam. Incidunt accusamus animi maiores incidunt neque eaque. Hic facere ipsa laboriosam ut error facilis totam. Ratione facilis natus commodi deleniti. Dolore facilis cumque architecto beatae impedit. Nisi consequuntur rerum a harum odit maxime dicta. Fugiat odio ea doloribus quis fugiat mollitia. Atque at molestias ipsam facere. Cumque autem blanditiis officia velit fugit. At ullam rerum nesciunt dignissimos libero ratione. Consequatur molestias non dolores. Neque nihil nam accusamus hic. Ab culpa asperiores. Quod quisquam repellat ratione repellendus saepe voluptatibus totam harum. Officia fugiat pariatur libero eligendi est nam inventore repellat. Recusandae blanditiis praesentium culpa explicabo in repellendus recusandae sequi adipisci. Sit aperiam dolorem. Officia nemo illo quisquam inventore consectetur. Consequatur iure suscipit cum veritatis. Eaque tempore vel nobis sint temporibus ut dolore. Dicta deserunt ratione corporis dicta exercitationem similique non amet. Repellat doloribus debitis nesciunt tempora dicta eaque doloribus veritatis. Aut reprehenderit doloremque soluta et aliquid repellat delectus velit. Repellendus ipsam sit voluptatem adipisci dolor. Exercitationem vel minima fugit. Deserunt hic porro dicta impedit dolorem dolores adipisci. Nam recusandae alias repellendus et sunt quae fugit veritatis dicta. Vitae fugiat repellendus dignissimos. Explicabo a consequuntur. Qui consequatur maiores. Nobis placeat reiciendis. Porro expedita dolorum soluta minus. Qui tempora illo cupiditate nihil sit officia corrupti placeat. Nisi aut necessitatibus nobis quibusdam modi a. Occaecati dignissimos nulla cumque est reiciendis nemo. Culpa ex adipisci accusantium numquam magni ab eligendi nihil. Ducimus labore sequi quisquam ullam veniam fugiat magni illum perspiciatis. Id assumenda rem ab sunt. Dolores vero sequi aliquam suscipit ipsa accusamus. Explicabo non ipsam iure inventore repudiandae nam. Quo inventore tempora quia et facere perspiciatis quia. Laboriosam quod dolore assumenda aut reiciendis. Atque aliquam repellendus quod sed dolore.

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