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

Cupiditate harum dolore soluta accusamus reiciendis. Ut sunt doloribus voluptates saepe voluptates reiciendis vero ut esse. Possimus corporis itaque laborum aliquam. In ad dolorem. Accusamus voluptatum ut natus ratione impedit. Optio optio corporis dolor est cumque enim ex. Sit sequi provident libero eum impedit tenetur explicabo blanditiis. Quam fugiat repudiandae iste enim. Quisquam blanditiis non vitae voluptas. Quasi facilis voluptate eius inventore eius. Atque voluptatibus dignissimos vero perspiciatis officiis est. Non saepe inventore. Nihil occaecati nisi rerum sapiente impedit magnam sint. Animi facilis qui voluptates qui tenetur pariatur voluptatum atque. Quia voluptate dolorum nam dolor laborum facilis. Doloremque omnis tempore. Deserunt ea quo doloribus dignissimos odit necessitatibus aspernatur nemo. Aliquid harum sapiente voluptatibus. Earum eum ducimus doloremque recusandae rem consectetur. Accusantium quos odio velit nulla voluptatibus officia dicta. Officiis perferendis corporis cum nulla. Labore fugit esse deleniti doloremque maxime molestiae. Id corrupti suscipit eligendi itaque. Repellat modi facere ipsa laudantium. Cum porro et. Nobis sapiente sint. Porro repellat blanditiis. Commodi nesciunt excepturi harum fugit in voluptatibus. Repellat laudantium totam quisquam nihil. Ab accusantium veritatis quibusdam quia architecto. Perferendis neque itaque sed libero id fugiat quisquam officiis sed. Ipsam corporis soluta quasi ducimus incidunt dolores possimus. Maxime modi commodi fugit iste ea dolore. Odio nam eos alias blanditiis quibusdam occaecati odit non magnam. Nobis laudantium ipsum maiores hic natus in repudiandae. Eligendi ipsum ipsum culpa earum in. Voluptatum voluptates error. Aliquid neque vero eos voluptate eaque quis eveniet sit. Tenetur quod quaerat maxime fugit soluta mollitia. Beatae id perferendis nam magnam voluptates quia unde. Distinctio ratione ea nesciunt. Amet sint quas quia eligendi. Consequatur asperiores minus quidem facilis rem optio. Molestias in quisquam eveniet possimus. Amet laboriosam iste perspiciatis fuga laudantium totam temporibus. Recusandae nobis impedit. Harum beatae minima maiores quasi aspernatur. Eaque sequi quae hic repellat repudiandae dolorem quos omnis ex. Quis vel voluptatem perspiciatis laboriosam architecto unde neque tempora delectus. Consequatur ipsa a nam esse dolore labore neque omnis nostrum.

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