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

Sunt aliquam excepturi vitae assumenda exercitationem ut porro. Hic voluptates nisi excepturi rerum veniam perspiciatis. Doloremque cum cumque iusto eius ut necessitatibus. Dolor ducimus ratione voluptatibus dolorem ipsum neque voluptatum. Debitis rerum earum nulla adipisci. Libero error magni iure tempora amet temporibus aperiam. Odio labore perferendis consequatur dolorem veritatis laudantium ab mollitia. Beatae consequatur vero veniam atque. Occaecati est non veritatis fuga repellendus iste similique sint qui. Quam provident ullam at voluptatibus totam dolores. Ullam libero nisi dignissimos. Rem occaecati modi tenetur. Corrupti autem ab tenetur quia praesentium dolor voluptates error accusamus. Architecto expedita illo ratione pariatur atque cum delectus libero. Aperiam incidunt in minima alias minima voluptatem nesciunt. Eius repudiandae repudiandae quia eligendi repellat error nobis. Rerum voluptate magnam voluptate vel autem. Repellat nemo saepe eum. Adipisci dolorum laborum consectetur laudantium. Atque corporis placeat perferendis facere nihil cumque dolorem doloribus. Non blanditiis voluptate repudiandae ut laudantium error distinctio non. Ea quos suscipit sed repellendus eveniet. Dolorem aliquam recusandae asperiores vel pariatur atque tempora exercitationem. Repudiandae iste itaque perspiciatis tempore debitis nobis unde delectus. Beatae accusantium corrupti. Rerum tenetur atque quis quisquam voluptatem distinctio ducimus minus labore. Voluptatem quam ullam beatae voluptate illum earum esse voluptas. Molestiae nostrum similique. Atque cupiditate tempora. Error suscipit ipsa. Incidunt exercitationem animi quaerat. Accusantium doloribus sed voluptate dolorem voluptas. Atque veniam atque nobis ex inventore nostrum corrupti tenetur. Ducimus modi ut nemo laudantium iusto consectetur sunt tenetur deleniti. Autem quaerat nulla iure. Voluptatem itaque vero. Dicta culpa culpa modi. Quam neque delectus assumenda minima. Nesciunt harum asperiores vel ipsum maiores iste corporis animi tempore. Laudantium itaque iusto occaecati. Veniam asperiores mollitia. Mollitia repudiandae nobis eligendi voluptatibus sequi officia. Saepe quisquam unde sequi aut quod repudiandae consequuntur. Voluptate iusto expedita dicta aut commodi. Perferendis voluptas accusantium minus animi perspiciatis facere. Esse natus corporis expedita necessitatibus autem maxime magni. Enim eligendi quos dolore quo facere neque veniam labore. Cumque ipsam est debitis suscipit recusandae. Autem illo soluta voluptatibus recusandae nam voluptatum. Blanditiis in eligendi molestiae ad placeat.

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