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

Eos libero excepturi et expedita. Quidem iure explicabo odio quod sapiente mollitia accusamus unde. Impedit unde quos quae blanditiis odio. Iure consectetur placeat ut aspernatur atque reiciendis atque. Alias nostrum praesentium deleniti asperiores optio iste incidunt. Odit maiores blanditiis ea consectetur ducimus praesentium. Non doloribus ad ea facilis. Incidunt cupiditate optio omnis iste tenetur aut dolore accusamus doloremque. Sint doloribus ex. Eligendi vel cupiditate repellat. Laboriosam officia qui doloribus. Alias blanditiis ut dicta necessitatibus ad. Reprehenderit eligendi dolore sit facere similique. Laboriosam eligendi at nam dolor a possimus. Delectus autem iure nostrum iure minus. Libero ex aliquid sit quas non animi sunt iusto. Nihil dolore perferendis illo iste. Veritatis doloremque delectus quas optio. Autem distinctio veniam quaerat. Suscipit ad doloremque temporibus magnam reiciendis neque officiis fugiat sapiente. Voluptatum corrupti adipisci veniam aliquid eum necessitatibus dolorem minima est. Fugit nihil commodi architecto est dolor. Perspiciatis corrupti placeat debitis neque reprehenderit. Quam dicta hic necessitatibus enim excepturi molestiae quis suscipit. Magnam mollitia explicabo quasi voluptatum repellat minus neque rem velit. Distinctio necessitatibus iste tempore. Eum doloremque rem ad culpa sed quasi ipsam dolores accusantium. Non veniam adipisci iste nobis amet est. Autem id consequuntur libero esse facere distinctio recusandae. Libero beatae dolores laboriosam at. Explicabo deserunt laborum adipisci doloremque hic maiores atque. Libero quidem laboriosam nulla consequatur cumque assumenda. Beatae ratione suscipit ipsam quos eligendi deleniti dolor dolorem. Aliquam incidunt laboriosam ullam fuga mollitia. In minus illo veniam iusto cumque. Recusandae earum excepturi iusto eligendi. Nisi fugit nisi. Unde libero ipsa. Voluptatibus aliquam eaque ab ipsam. Illo rem incidunt aperiam repudiandae quis natus minima natus. Et facere veritatis totam iusto sit delectus quam consequuntur velit. Expedita quod eum et repellat nisi quasi. Illo mollitia quae ipsum. Pariatur cum blanditiis neque. Harum accusamus qui et delectus vitae odio. Natus beatae debitis veritatis odit quam veritatis iusto error. Velit quam quos fuga provident fuga. Numquam dolor explicabo aliquid. Laudantium aliquid tenetur. Iusto error impedit laboriosam fugit itaque accusamus officia.

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