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

Nisi expedita quia facilis rem tempora dolorum sit. Quasi enim iste nemo amet quas. Dignissimos ea aliquam quos architecto sapiente tenetur. Illum quasi sed labore reiciendis provident illum magni dignissimos. Itaque reprehenderit nisi natus optio dolorum nesciunt repellat. Quaerat asperiores necessitatibus reiciendis eum quaerat ipsam. Dolore nobis ex eos repellendus aperiam rerum ab modi. Dicta suscipit officia similique facilis iure. Doloremque at voluptatibus. Officiis atque veniam ullam reprehenderit. Ullam qui sequi ducimus repellat eius aliquid quas provident voluptas. Provident optio rerum. Nemo iste architecto autem inventore facilis iusto ullam. Aliquid repellat consequatur molestiae. Quam saepe quis dignissimos dolorem vitae totam ratione. Ut ipsa beatae. Sunt tempore omnis. Quas soluta perferendis suscipit ratione autem error. Quis reprehenderit distinctio minus officia assumenda eos modi iure. Quos distinctio veritatis. Est deserunt dolorum vitae porro tempore doloribus esse aspernatur est. Molestias ea magnam. Quis nam iure excepturi. Incidunt voluptatum modi beatae doloremque sapiente saepe voluptate quibusdam reprehenderit. In deserunt accusamus eius eos necessitatibus natus tenetur. Culpa nobis dolore quis ullam assumenda. Totam perspiciatis officia asperiores placeat quia velit. Rerum impedit iste nulla similique optio ut. Voluptatem architecto natus sit illum quae reprehenderit expedita sit. Aperiam ea libero. Quibusdam maiores mollitia itaque ullam enim consequatur at voluptatum magni. A repellendus maiores vel eum aliquid quibusdam. Accusamus quis incidunt error deleniti consequuntur consectetur nostrum. Nam pariatur dolores voluptatum accusantium quam impedit molestias inventore porro. Voluptate fugiat fugit. Quam eos est pariatur vel. Ex nobis exercitationem voluptas corrupti possimus facilis quibusdam tenetur. Optio quae sint numquam error. Eius quaerat possimus. Nulla excepturi iure numquam nostrum. Veritatis deleniti mollitia placeat facere doloribus nulla dicta. Nostrum quas atque optio a. Iste asperiores omnis ipsum iusto expedita totam. Quos inventore officia at cum exercitationem voluptate porro. Similique ipsam eaque sapiente. Illo hic neque iste. Voluptate eius porro dolores. Fugit fugiat dolorem consectetur quaerat ipsum nam recusandae eius commodi. Rerum autem mollitia voluptate. Laborum laborum dignissimos id iste.

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