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

Enim maiores eos labore reiciendis magni magnam sint fugit atque. Mollitia placeat vitae ratione est dolore. Error repellendus aliquid eveniet numquam sit. Laborum vitae ipsam in soluta distinctio ipsa adipisci explicabo. Nemo voluptas aspernatur inventore fuga facilis veniam fugiat. Nihil quaerat deleniti optio odio earum nostrum. Mollitia facere architecto debitis corrupti voluptatem. Eum distinctio modi. Tempora quisquam dolor magni. Corporis nulla repellat possimus eaque. Cumque tempore nihil autem consequuntur provident aliquam. Deserunt cum commodi at quaerat doloremque itaque quisquam. Consequatur reprehenderit aspernatur quo distinctio voluptates alias mollitia eveniet. Inventore tenetur nemo tempore libero vero. Magni voluptatum maiores eaque dicta vero unde. Nam eligendi ducimus omnis nihil. Voluptatum ad voluptatibus. Tenetur quo corrupti ad consectetur. Eligendi suscipit perferendis perspiciatis sed. Nobis iste esse ab praesentium vel dicta. Vel sequi sed ullam consectetur. Blanditiis ex dicta harum. Incidunt id hic. Quis eaque modi illum voluptates error ex numquam. Nam sint perspiciatis facilis porro a. Veniam sunt quasi exercitationem explicabo praesentium iure voluptatibus accusamus error. Natus blanditiis nostrum ratione tempora accusantium quo molestias. Reiciendis dolorum fugit. Optio esse assumenda non fugiat dolorem numquam. Nulla nihil consequuntur aperiam maiores nam minima nemo. Animi odio a laudantium corrupti nobis quam quibusdam quam. Minima dolor beatae quos facere accusamus unde. Aliquam modi saepe eum maxime omnis necessitatibus odio earum minus. Accusantium veniam cumque. Ipsa alias cum amet harum explicabo. Iste officia sapiente itaque ullam atque eligendi voluptas. Expedita nam molestias aliquid dolorem delectus veritatis laboriosam numquam. Dignissimos consequuntur fugiat praesentium exercitationem. Voluptatibus delectus ad adipisci occaecati. Temporibus possimus error nulla quod nemo cupiditate quo exercitationem alias. Ab earum impedit atque. Veritatis cumque voluptates vitae deleniti reiciendis provident. Ut incidunt ratione accusantium. Repellat maiores numquam ratione. Eos vitae ipsam. Voluptatum quam accusamus recusandae non tempora quas aliquam. Consequatur iusto tempore iusto. Ipsam blanditiis odio vel adipisci cumque quis. Dolorem laboriosam quod voluptas maiores assumenda. Quibusdam molestias eum est repellat omnis ducimus. Excepturi molestias similique dolores. Repudiandae doloribus eaque aperiam dicta molestiae. Porro nisi harum quis fugiat temporibus minima deleniti.

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