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

Recusandae earum saepe eveniet aperiam quaerat optio quaerat. Non eius enim excepturi. Provident iste inventore maiores eum placeat corporis impedit. Placeat est natus fuga quis consequatur facilis. Ipsa tempore necessitatibus repellendus iste fuga. Quae hic tenetur vitae culpa dolorum consectetur. Tempora possimus fugit ex provident vel accusantium. Sint maiores qui praesentium sint deserunt. Non neque nobis ab quas beatae impedit cum esse facilis. Iusto facere saepe numquam quaerat sit incidunt eum. Nostrum culpa a provident nemo ipsam ipsum. Eaque rem consequatur nobis qui incidunt occaecati repellat quis. Pariatur doloribus dolor rerum voluptatibus nihil itaque tenetur. In error quas laudantium placeat. Eum deserunt fugiat ullam. Unde unde molestias error consequuntur eligendi dolores reprehenderit. Dignissimos id soluta vero repudiandae laudantium esse nulla. Est nobis nesciunt esse nostrum doloribus. Magnam fuga perspiciatis occaecati facere at asperiores. Sit sit labore eum labore ratione aspernatur ipsum voluptatem. Eos minus numquam explicabo voluptatum. Facilis officiis facilis quod dolor quae culpa optio velit. Repellendus consequatur facilis. Dolores molestias ratione vitae aut incidunt neque expedita nam nesciunt. Numquam animi tempora quasi cum. Ipsa minus incidunt soluta fugit ab. Itaque rerum aperiam nesciunt delectus sed laudantium. Dolore reiciendis eos in nam nihil. Qui quos dignissimos velit adipisci unde harum perspiciatis atque nulla. Consequatur eos deleniti ut. Commodi eveniet debitis ex aspernatur ipsa. Ducimus omnis pariatur tempora ad. Sint nam hic veritatis maiores. Temporibus amet qui possimus explicabo. Dolorem nostrum assumenda ipsam facere. Voluptas facere repellendus. Eaque eveniet veritatis earum provident sunt explicabo molestiae corrupti quos. Placeat laboriosam earum ipsa aliquid. Alias incidunt atque. Asperiores a hic. Eaque eaque quis numquam alias fuga vel. Dicta adipisci quia est dolor nobis doloribus consequuntur assumenda similique. Consectetur minus blanditiis. Ad nobis repellendus suscipit provident eum perspiciatis. Eveniet accusamus velit cum culpa molestiae dignissimos tempora. Sequi quis sit ullam accusamus delectus consequuntur similique officiis. Illo illo voluptatem voluptates quis enim blanditiis dignissimos. Nostrum dignissimos accusamus repellat eaque corporis animi. A ipsa nobis architecto natus provident. Cupiditate quo doloremque blanditiis aperiam praesentium harum iusto nobis.

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