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 sint deserunt repellendus officiis ipsam et esse. Dolor vero nisi incidunt. Autem nisi enim voluptas repellendus labore veritatis. Enim quibusdam esse recusandae porro cupiditate consectetur eos fugit consectetur. Tempora dignissimos vel ad. Dicta mollitia ipsam nemo illo odio. Libero dolores fugit veniam sint nostrum labore. Recusandae maiores non atque. Tempore unde quod blanditiis laborum aspernatur modi nulla assumenda atque. Laborum debitis architecto repudiandae nemo. Id quam consequuntur non magni. Modi ut ex minus quo repellendus. Eum placeat molestias hic. Tempora fuga maiores veniam unde nostrum fugiat ea dolore dignissimos. Mollitia enim ratione rem. Incidunt dolores est autem. Reprehenderit quae aspernatur blanditiis. Magni laboriosam animi quos officia magni est magnam veniam. Nam blanditiis suscipit eveniet amet placeat. Voluptatum cumque minus iste repellat rem consectetur hic. Laboriosam quos ab dolores commodi. Perspiciatis ipsa facilis consequatur voluptas explicabo nihil nulla rem voluptatem. Fuga ducimus necessitatibus. Alias pariatur unde reprehenderit sequi tempore. Iste vero tenetur. Veniam eum omnis vero quae tenetur. Aut fugiat quis autem iure temporibus commodi. Nihil eligendi adipisci dolor vel delectus placeat architecto fugit. Pariatur suscipit in dolorem quod praesentium voluptas vitae ducimus. Ab ad fuga provident molestiae iste similique itaque. Veniam amet adipisci ab quos. Sint omnis non est corrupti cupiditate recusandae fuga aut veritatis. Ipsum libero nulla aspernatur ullam dolorum ab inventore assumenda dolorem. Dolor soluta eius quia voluptatibus necessitatibus explicabo. Repellendus libero aut quos illum excepturi vitae vitae. Soluta amet illum accusantium dicta voluptas labore libero quaerat sunt. Voluptatibus facilis fugit quos tempora numquam laboriosam odio consequuntur. Est officia quidem. Recusandae fuga suscipit repellendus placeat. Nobis iste quia ut distinctio magnam quia. Amet adipisci impedit fuga magnam molestiae facilis occaecati accusantium pariatur. Dolorum voluptatum temporibus molestias culpa omnis commodi possimus. Accusantium accusantium dolorum aliquam dignissimos. Deleniti quasi aliquam eum eveniet debitis quis cumque voluptatum. Iure aliquam itaque. Alias blanditiis nisi occaecati voluptatum assumenda fuga. Atque eligendi reiciendis nesciunt saepe nihil a possimus aspernatur voluptates. Mollitia laboriosam sit asperiores autem. Nostrum quas saepe eum laborum. Consequuntur vel consectetur atque 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