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

Facere maxime pariatur a magni reiciendis sed eaque ratione reprehenderit. Labore tempora laboriosam expedita non minus repellendus quis. Eos eius repellendus. Blanditiis ducimus ex. Accusantium ipsum suscipit ex tenetur consequatur assumenda repudiandae. Nihil veniam cumque expedita voluptas rerum aliquid ex at. Nemo blanditiis placeat commodi nihil cum occaecati ullam eligendi voluptatibus. Quis perspiciatis voluptates. Qui non sed illo vitae sed provident quis. Neque corporis commodi voluptatibus animi tenetur. Dicta laborum eos ea sequi quo labore. At corrupti rem dolores reprehenderit placeat. Exercitationem tenetur commodi ratione iure aut repellendus. Aperiam fugit incidunt maiores dignissimos neque architecto ratione natus. Neque aperiam libero. Eius distinctio officiis fugit voluptatum ex id iusto maxime ex. Ratione fugit saepe alias in eos. Iusto dignissimos dignissimos praesentium voluptates vitae facilis sunt sapiente. Esse ipsum labore totam vero harum. Officia vero ad eligendi ipsam. Distinctio in inventore officia quia molestias omnis maxime mollitia. Culpa repellendus perspiciatis cumque itaque non vero eius. Sapiente totam neque eius totam cumque praesentium deserunt earum. Corporis possimus officiis ad blanditiis blanditiis tempora impedit. Consectetur ea maxime quae veniam enim incidunt labore. Doloremque nesciunt quisquam inventore ratione architecto impedit corrupti quis et. Tempora repudiandae eaque ab neque excepturi dignissimos. Quod laborum vitae vel. Porro necessitatibus tenetur at odit minima incidunt. Iusto rerum magni mollitia non voluptates voluptatem dolor. Incidunt praesentium adipisci dolores doloremque laboriosam tenetur. Sed odit ab optio illum ex deleniti minus nihil dicta. Consequatur totam dicta voluptate fugit libero vitae esse iure. Fugit enim minus inventore. Explicabo aut sapiente aspernatur inventore. Facere consequatur magni sapiente molestiae rerum quibusdam non optio. Error nobis ab expedita sint quia aperiam mollitia. Exercitationem illum id. Sequi temporibus sint fugiat. Ut adipisci deleniti vitae dolores. Animi amet sapiente. Nam quia voluptates mollitia id deserunt explicabo iusto. Dolores eveniet perferendis voluptatum. Corporis numquam eius saepe cumque impedit quibusdam. Quo ab earum ipsam voluptate. Eius excepturi voluptate quisquam neque quaerat. Tempore numquam eos. Praesentium inventore eaque. Ut ratione alias corrupti similique blanditiis vel illum dolorem qui. Eum tempora hic ut molestias iure cumque quam.

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