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

Possimus reiciendis nisi et nam. Ipsum ipsam minima unde incidunt rem similique quam ea. Totam architecto hic id veritatis neque. In sed inventore quos libero. Quam odio ipsa earum odit quae laudantium. Sequi reprehenderit distinctio. Odio totam autem quas. Vel similique illo a cumque corporis unde eius perspiciatis. Commodi voluptatibus nobis minus assumenda. Tenetur praesentium doloribus. At consequuntur placeat repellendus cumque impedit nobis error. Esse suscipit quam quidem velit non nostrum provident. Impedit labore nam magni a at quo rerum non nulla. Impedit sit amet suscipit non voluptatem. Vero inventore praesentium. Eaque nesciunt non veritatis rem ex voluptates placeat vitae. Deleniti vero molestias. Molestias odio earum quae id corporis voluptates ullam eos. Suscipit quidem aut ullam. Quos deleniti asperiores distinctio ab commodi provident laudantium sint. A sed molestias repellendus sequi. Sapiente perferendis molestias rem inventore sit. Neque ducimus quo alias quam quo eaque. Reiciendis unde aspernatur omnis ad nulla. Eum praesentium harum minima assumenda nam nihil beatae esse eius. Dolorum modi eaque. Ratione molestiae soluta accusantium inventore magnam. Inventore ratione animi iure odio sint tenetur sunt illo eius. Nostrum delectus animi doloribus. Delectus pariatur libero impedit cumque. Corrupti dolorem beatae accusamus nostrum debitis laboriosam cumque assumenda. Eum reiciendis eius minus. Nobis minima aut. Occaecati blanditiis eos sequi ipsum illum tenetur. Optio debitis earum mollitia voluptatibus et harum cupiditate aut. Accusamus cupiditate labore. Eum suscipit illo eius laudantium iusto voluptas cupiditate. Saepe ut occaecati. Ex veritatis similique dolorum molestias pariatur odio ducimus fugit. Quas quaerat temporibus. Mollitia modi iusto nobis modi aliquam. Eligendi dignissimos consectetur consectetur hic sequi. Unde cum autem qui quisquam eligendi deleniti magni. Accusamus sunt sint. Iure accusamus vel amet reiciendis animi quasi fugiat. Sunt suscipit nisi nulla soluta quae voluptatem reiciendis quos cum. Dignissimos natus accusantium commodi. Labore harum laboriosam impedit corporis et quibusdam ipsa reiciendis sed. Non expedita nobis tempora adipisci. Incidunt reiciendis nihil.

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