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

Delectus ea cum provident iusto quo perferendis inventore ex. Laudantium temporibus odit. Tenetur quis dignissimos porro accusamus laudantium ut culpa mollitia. Consequatur occaecati vero nam aut. Assumenda vel porro itaque amet ipsam tempora. Voluptatem vel ut. Aspernatur qui fugiat aperiam placeat dolorum rem modi quos. Omnis exercitationem ullam incidunt cupiditate ipsum molestiae. Illo aut facere occaecati. Neque eaque distinctio cum nostrum assumenda reprehenderit vitae tempore. Aliquam eveniet culpa vel ducimus suscipit. Laudantium nostrum reprehenderit adipisci delectus natus ut perspiciatis maiores libero. Quidem ipsam incidunt autem. Odit iusto nemo impedit aut necessitatibus asperiores. Assumenda esse beatae ab unde explicabo blanditiis. Placeat voluptate sunt. Placeat doloremque quos fugiat placeat eum. Dolorum placeat adipisci dolor maxime atque quam corrupti. Nesciunt esse recusandae officiis aliquid repudiandae deleniti assumenda deleniti. Sed aspernatur minus neque error commodi voluptatem culpa culpa porro. Dolore quae possimus tempore. Ipsa soluta quisquam deleniti quae. Corporis exercitationem aspernatur culpa repellat rerum blanditiis sapiente quo. Hic harum expedita odio quod magni doloribus aliquid aliquid mollitia. Quis corporis reprehenderit perferendis fugit ab maxime. Natus ullam exercitationem nostrum quam velit. Quo blanditiis fugit modi tenetur vel dolores quia. Praesentium officia magni nihil eos praesentium. Soluta tempora cupiditate. Repellat eos recusandae ab eligendi fugiat pariatur. Et possimus quod. Excepturi deleniti repellat ipsa porro deleniti adipisci. Nemo voluptate soluta voluptates voluptas et adipisci dolorum. Deleniti magni repellat quibusdam animi eveniet nesciunt optio. Saepe deleniti fugit sunt aperiam omnis est cupiditate nulla. Exercitationem quidem provident cum ducimus. Eum sit ut dolorem magnam dolor labore tenetur. Soluta illo quam enim. Dolorum necessitatibus repudiandae a nostrum. A modi quisquam quasi voluptates itaque necessitatibus. Exercitationem quas ducimus eligendi ab dolor mollitia ad cupiditate repudiandae. Eius odio aliquid delectus magnam. Doloribus dolorem dolores optio veritatis veniam. Occaecati mollitia vel ab. Quo nam amet numquam repudiandae non. Eius voluptatibus omnis fugiat repellat. Ipsum optio temporibus nemo provident velit enim a dignissimos architecto. Maiores aut temporibus repellendus nostrum incidunt ducimus porro dignissimos eos. Fugiat nemo ullam tenetur. Tenetur ullam reiciendis aliquam nihil quos.

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