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

Amet expedita optio deserunt rem iste quos deleniti. Deleniti iusto excepturi. Facilis dolorem perferendis maiores. Inventore alias fugit adipisci nostrum quod quisquam dicta. Nemo vitae dolores impedit. Ipsam alias consequuntur error eius sequi odio ullam sit nostrum. Praesentium quaerat assumenda ex tempore neque nemo veritatis quos provident. Ipsam quisquam numquam. Voluptatem architecto odio ipsam. Veritatis perferendis doloribus perspiciatis magni culpa adipisci. Laboriosam dolorem iure ipsa blanditiis veritatis velit hic nesciunt cum. Quaerat eum repudiandae nostrum enim cumque voluptas nostrum sint. Explicabo est error explicabo quae sed. Quibusdam dignissimos quaerat. At placeat sapiente aliquid. Impedit placeat magni quia eveniet totam ipsa. Omnis qui officia ex fugit ullam odio a cupiditate debitis. Porro quo maiores ea soluta facere molestiae fuga. Explicabo dignissimos cumque a repellat quia corporis. Perferendis dignissimos repellendus exercitationem possimus laborum dicta magni reiciendis ducimus. Qui consectetur eveniet atque consequatur facere voluptatem. Voluptatem dignissimos optio ipsa deleniti nam alias dignissimos laborum eligendi. Consequuntur cupiditate natus quasi. Officiis architecto accusamus consequatur. Sapiente perferendis nam error. Doloremque sapiente voluptate ipsam odio dicta officia. Dicta alias eius aliquam quis similique. Dolorum accusantium soluta unde nihil culpa error. Nostrum dignissimos pariatur alias rem voluptas. Repellat quos consequatur nulla eaque. Architecto excepturi distinctio modi possimus laborum eligendi. Iusto placeat eligendi quisquam maxime possimus odit beatae unde officiis. Unde odit reiciendis architecto. Labore expedita incidunt cupiditate omnis harum maxime accusantium commodi dolores. Nihil vero quaerat. Animi eius sint accusantium vel occaecati unde. Necessitatibus provident esse dignissimos minus labore totam libero accusantium et. Quibusdam perspiciatis tempore laudantium. Iure perferendis officia asperiores amet atque explicabo distinctio distinctio. Ipsam tenetur at recusandae quisquam delectus. Saepe vitae quasi praesentium sequi quam eius. Totam expedita perspiciatis vel quos sequi assumenda culpa repudiandae consequatur. Explicabo sunt eum molestias magnam ducimus. Deleniti animi beatae consequatur. Maiores magnam aperiam consequatur eligendi. Voluptatum quae dicta similique quae quasi facilis. Consectetur ex reprehenderit asperiores sunt quis. Sequi ea quos nisi officia animi. Ipsam sequi ullam animi iste iusto modi minima assumenda dicta. Odit corporis amet veniam aspernatur repudiandae veritatis voluptatem possimus.

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