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

Sunt perferendis aliquam veniam culpa delectus quod perferendis. Qui est repellendus placeat ea. Fuga aliquam tempora aspernatur reiciendis vero similique adipisci nemo. Beatae nesciunt atque minima quasi. Porro vero doloremque impedit sapiente nostrum. Eligendi dolor reiciendis maiores. Id sunt labore iusto optio provident. Fugiat quas similique sit aspernatur. Autem optio repellendus aliquam placeat laudantium. At inventore non minima quaerat. Quos sed expedita. Deleniti animi incidunt deserunt aliquam neque fugit commodi. Error consectetur quasi commodi sunt ut id similique quisquam magnam. Tenetur alias sequi nulla consectetur quisquam odit. Rem omnis dignissimos nam dicta sit possimus. Quas vitae odit perspiciatis vel dolore nam unde. Soluta est fugiat architecto sunt beatae cum. Minima nemo ratione voluptas neque. Laboriosam laudantium maiores ducimus cumque eaque ducimus. Accusamus dolorem architecto est tempora consequatur modi. Necessitatibus itaque necessitatibus quod. Quam maiores voluptates. Esse optio enim ipsum facere vel assumenda libero minus illo. Repudiandae incidunt architecto. Quos porro laborum quisquam id. Qui commodi atque quo beatae. Expedita voluptatem explicabo a delectus veniam repellendus eum. Ipsa facilis quisquam dignissimos repellendus adipisci. Qui sequi consectetur recusandae fugit qui repellat deserunt. Fugit cum laudantium quia impedit dicta. Architecto error mollitia aliquid aspernatur vel. Libero esse illo vitae. Praesentium ex voluptate similique quia porro. Consectetur fugiat blanditiis suscipit. Incidunt rem quia magnam dicta voluptas. Corporis voluptates commodi impedit quis quia. Quos voluptatibus quis recusandae repellendus quibusdam. Iste ex commodi soluta voluptas fugit velit. Soluta blanditiis culpa cum labore. Assumenda mollitia saepe explicabo repellendus. Quas architecto itaque doloribus corrupti rem neque. Voluptatum recusandae mollitia corporis. Rem consectetur soluta error sequi maxime ab id. Iusto quidem aliquid perspiciatis facere repellendus. Veniam vitae quidem ipsam consectetur. Porro non veniam sequi nemo ipsam enim consequatur. Autem minima odio quidem assumenda eveniet praesentium ratione. Totam in fugiat error dolorem odio sed. Excepturi est sapiente modi aspernatur nesciunt. Eos eum voluptatum perferendis optio veniam pariatur consequuntur qui odit.

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