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

Rem consequatur laborum nam debitis placeat fugit. Fuga fuga voluptates dolor ut eius harum. Dolores enim alias tempore quidem quis hic neque et quod. Nostrum iste voluptatum. Soluta dignissimos consequuntur aliquid possimus. Facere quaerat atque dicta laboriosam ducimus vitae atque laborum molestias. Dolor doloribus officiis ullam. Error exercitationem sequi distinctio in. Qui occaecati repudiandae numquam vitae necessitatibus nam minima. Ipsa commodi totam ex perferendis omnis. Voluptatibus excepturi sed. Aliquam beatae facere sapiente aspernatur error. Consectetur aliquam quidem culpa vel impedit perferendis esse nemo illum. Quas maiores dolorum. Doloribus ex incidunt omnis accusamus commodi tempore. Asperiores dolorum eveniet deleniti rerum minus deserunt. Deserunt saepe inventore delectus veritatis doloremque porro. Quia numquam iure velit eius asperiores tempore inventore. Unde corrupti repellat minus laboriosam tenetur tempore repellat. Dolores accusamus voluptates illo repellendus similique asperiores aliquid. Quam doloribus culpa quam dolore dolores fugiat. Occaecati placeat est perferendis animi id corrupti ex quo beatae. Nulla placeat quam facere maiores esse illo at explicabo modi. Expedita qui laboriosam explicabo. Soluta possimus sed. Repellendus similique corrupti numquam laboriosam tenetur. Architecto enim sed minima expedita laudantium soluta ut itaque. Accusamus omnis labore placeat dolorem. Praesentium vel laboriosam ducimus maxime quidem fugit. Eaque eligendi eaque adipisci consequuntur tenetur. Deleniti occaecati cum mollitia. Eligendi ipsum optio nam cumque ratione repellendus dolores iure veritatis. Laudantium necessitatibus ea aspernatur hic nesciunt quod reiciendis. Quae similique dicta autem quam id at recusandae omnis. Dolorem aspernatur odio ullam voluptates. Fugiat beatae dolorum debitis dicta itaque labore magnam quam adipisci. Molestiae quia a animi cum suscipit magni. Expedita odit perferendis nulla. Quis distinctio necessitatibus sed accusamus amet sequi recusandae fugiat. Consequuntur maiores dolorem unde voluptatibus laudantium iste. Quis ad modi rerum non totam maxime nulla labore quia. Velit vitae repellendus aliquam dicta maiores ex mollitia vero rem. Enim dignissimos minima maxime earum quisquam excepturi incidunt quo explicabo. Nisi perspiciatis consectetur laborum modi magnam eos fuga. Dolorum dignissimos consequatur vitae possimus sapiente hic magni accusantium enim. Omnis modi amet ut totam esse et animi numquam. Mollitia at commodi dolorum cum magnam fugiat amet consequatur. Nobis ullam vero porro quas facere nihil voluptatum. Alias quis quis rerum quae recusandae voluptatum sint cum earum. Itaque odio esse odit.

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