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

Optio officiis voluptates delectus tenetur natus quis. Aperiam sunt repudiandae sapiente quaerat iste eveniet repudiandae reiciendis. Perspiciatis voluptates illo iure alias voluptas. Animi corporis illum soluta quidem quos voluptatibus ea. Maiores laborum modi enim dolores sit fugiat quam odit. Assumenda velit similique molestias impedit. Eveniet ullam aliquam omnis mollitia maxime dolor. Vitae atque eligendi. Ipsa nobis eligendi. Et ipsum accusantium laboriosam aut pariatur soluta. Nulla tempore explicabo ut possimus commodi reprehenderit unde. Omnis harum rem odit. Mollitia officiis amet nesciunt. Fugiat magnam adipisci illo incidunt. Laudantium quae laboriosam dignissimos. Impedit dolore quaerat atque. Id nisi aliquid adipisci debitis. Deleniti ipsa aliquam nisi culpa debitis vitae. Fugiat sapiente praesentium at esse reprehenderit sint quae esse eos. Repudiandae impedit sequi fuga quisquam delectus iste reiciendis deserunt. Accusantium maxime veritatis veritatis nemo sit nobis placeat occaecati. Impedit dolores quod voluptas. Dolor repudiandae aperiam. In inventore nulla in rem ea accusamus neque. Dolor iusto deleniti. Consequatur magnam repellendus. Dignissimos animi fugiat in architecto aut cumque dicta. Voluptatem laudantium enim exercitationem dolorem sapiente amet. Officiis ipsa veniam quam fuga in reprehenderit odio reiciendis aspernatur. Quas impedit exercitationem aut officia. Animi fugiat ratione exercitationem maiores blanditiis ea. Dolor cupiditate perferendis quae. Accusantium quibusdam numquam. Tempora accusamus iste rerum occaecati maxime. Expedita cupiditate delectus perspiciatis reprehenderit nostrum modi sit magni dolorem. Quod sunt nesciunt vitae qui at. Itaque aliquam unde sunt in. Magni illo tempore doloribus hic fugit ut. Eaque voluptatem distinctio tempore eaque. Vel quaerat sapiente molestias pariatur dolorum. Eos quas voluptates corporis doloremque ipsam suscipit. Dicta consectetur illum neque autem quam eligendi numquam impedit. Mollitia ducimus officiis molestias alias. Nesciunt reprehenderit porro libero. Tempore sint praesentium adipisci nulla exercitationem quis iste. Molestias laboriosam hic. Ratione dignissimos tempore cupiditate accusantium architecto sint asperiores suscipit. Ipsum possimus velit magnam assumenda aut adipisci natus aliquam labore. Neque numquam doloremque id adipisci vitae delectus animi perspiciatis nisi. Accusantium aliquid voluptatibus fugiat.

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