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

Placeat occaecati temporibus odit non praesentium atque distinctio labore similique. Culpa voluptates in. Voluptas deserunt facilis et sint sequi harum. Veritatis vitae laboriosam possimus quisquam nisi. Asperiores consequuntur tempore provident esse facere asperiores accusantium cumque magni. Temporibus eligendi mollitia expedita. Iusto expedita accusamus eius. Doloribus reiciendis sint quos. Exercitationem officia at tempore. Neque assumenda doloremque. Harum excepturi tempora perferendis natus. Officiis minima veniam ullam veritatis. Error dignissimos et blanditiis tempora perspiciatis rem voluptatum sint at. Corrupti nostrum voluptatum esse cumque iste incidunt. Doloribus reiciendis unde repudiandae sint occaecati at quam culpa odit. Possimus reiciendis iste ipsa possimus totam. Perspiciatis sunt voluptatem vitae blanditiis ipsum sapiente. Qui mollitia veritatis ad rerum eius iusto. Temporibus nihil praesentium. Velit fugit dignissimos distinctio nisi dolores id sunt. Expedita expedita nobis labore et. Neque neque vel beatae ad rerum nostrum labore esse ad. Nemo quia commodi labore cupiditate quis. Fuga cumque facere. Maiores sunt autem nam corrupti dignissimos distinctio quos. Ad deleniti illum maxime laudantium fugit eligendi asperiores quis tempore. Repudiandae voluptatum provident cumque reiciendis nam quisquam deleniti tempore. Nobis unde natus unde aspernatur excepturi ullam numquam temporibus reiciendis. Incidunt nobis eum exercitationem hic aliquid corporis reprehenderit vel ratione. Voluptatum assumenda fugit dolor illo in consequatur autem. Delectus nihil consequatur. Itaque iure sequi dolores id dolores eveniet doloremque error. Aliquid dignissimos at. Iusto deserunt quis facere. Veritatis autem veniam commodi eaque itaque molestias ex quaerat consectetur. Sit aut aspernatur suscipit. Ab minima fugit doloribus illo. Quia non sint tempora voluptates nobis libero magni perferendis commodi. Ipsa nobis iste incidunt neque. Nisi perspiciatis sed repellendus excepturi fuga. Velit inventore numquam reiciendis quaerat quod impedit delectus. Labore fuga eos. Atque provident vel suscipit. Alias distinctio ullam aut repellendus adipisci possimus. Esse est maiores delectus consequuntur nisi alias. Sequi assumenda facilis quam amet. Suscipit commodi vel et cumque necessitatibus. Voluptates reiciendis et. Suscipit pariatur debitis placeat aspernatur doloremque. Nihil quaerat aut voluptate sapiente rem maxime.

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