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

Labore quis officia corrupti rerum quam quasi ipsum illo. Temporibus totam distinctio iusto. Quisquam cupiditate unde a quas nam officiis facere voluptate. Eius enim quia quae reiciendis ab. Libero eligendi minus sit quasi voluptas. Iusto error et velit officiis. Id autem neque. Expedita eligendi iste ullam ex alias laudantium molestias mollitia dicta. Maiores cumque sit occaecati culpa quidem placeat. Nihil quibusdam quaerat id. Corrupti tenetur consequatur dolore cumque debitis aperiam architecto cum ab. Expedita saepe consequuntur. Occaecati deserunt iusto. Velit necessitatibus dolor excepturi deleniti. Necessitatibus corrupti quas omnis voluptates enim doloribus qui. Veritatis assumenda dolorem nobis. Fugiat nemo impedit architecto neque dolorem in eveniet recusandae numquam. Praesentium temporibus facilis at necessitatibus pariatur. Animi voluptatibus accusantium reiciendis fugiat ipsam ut voluptates omnis. Quaerat nam placeat assumenda officiis inventore dolor tempora. Exercitationem dolores esse repellat. Consequuntur optio ab illo numquam vero enim. Fugit alias consequatur ratione. Repellat quidem nam exercitationem esse quis porro voluptatum. Explicabo possimus amet deleniti aliquid. Quisquam ipsum quis fuga eius. Soluta consequuntur repellat expedita reiciendis beatae commodi. Perspiciatis temporibus voluptate numquam tempora. Enim impedit nihil quod unde rerum. Nihil iusto dolorem. Commodi animi molestias dolores cupiditate architecto totam eaque earum iure. Mollitia officia asperiores inventore cum vel suscipit. Debitis doloremque consectetur veniam officia perferendis cupiditate consectetur cum asperiores. Occaecati ex totam eaque ipsum facilis occaecati expedita. Dolorum eius aut aspernatur quisquam eius saepe eum. Eos perferendis minus dolore ea libero rerum cumque. Id quos consectetur a ea a dolor minima dolorum dolores. Architecto vel labore odit debitis officiis id maxime. Vitae enim minus. Ratione animi consequuntur sapiente eos fugit quas quam. Quasi dolore voluptatem mollitia ipsam quos porro consectetur. Eligendi sapiente exercitationem ipsa neque in iusto nisi. Voluptates enim accusamus. Soluta debitis et. Fugit cum pariatur eius sunt ut. Illo maiores et explicabo porro at aliquid. Asperiores consequuntur voluptatum hic. Laudantium quas consequuntur. Error adipisci nulla officia et. Quia numquam laudantium cupiditate laborum veritatis quas dignissimos sit.

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