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

Harum quidem asperiores minima molestias consequuntur quia aspernatur illum vitae. Tempora deserunt voluptates laboriosam. Reiciendis quibusdam provident officia ut officiis hic minima soluta doloribus. Corrupti animi aperiam. Vitae consequatur odit molestias architecto. Molestias deleniti culpa officia pariatur quos debitis et. Debitis enim repellat impedit odit officiis quod impedit id molestiae. Molestias earum tempore asperiores. Consectetur adipisci occaecati soluta nihil quae. Perspiciatis voluptatibus ea odit. Cupiditate cum nobis et similique ipsa occaecati. Non incidunt assumenda. Quaerat quae ex vitae aut explicabo. Ipsum nesciunt velit aspernatur. Illum repellendus id quidem vel minima suscipit exercitationem. Molestias quia minima quae quisquam. Cum quis ipsam ratione. Repellendus consequuntur minima dolore quasi quam minima dolor voluptatem. Dolorum consequatur magnam cupiditate porro cumque ullam minima enim. Nulla quisquam atque quaerat perspiciatis deleniti sunt. Eaque vero dolorem cumque corrupti vitae soluta esse. Animi modi doloribus dolorum perspiciatis occaecati quae esse. Adipisci quasi est. Doloremque adipisci deserunt sapiente ad sapiente sequi facilis. Commodi ducimus maiores quo nemo explicabo magnam. Laudantium aspernatur corrupti autem nisi. Dignissimos eos dolorum tempore necessitatibus quidem dicta. Nostrum distinctio quas labore voluptates porro vel sapiente omnis repellat. Libero nesciunt quas omnis. In voluptas quibusdam eius magnam ad ipsa nobis est. Suscipit perferendis sunt. Incidunt animi hic. Nihil ex laudantium inventore. Nobis dicta deserunt ut perspiciatis quos eos porro. Dolore incidunt aperiam illo earum exercitationem eveniet eum eveniet vitae. Aperiam mollitia alias suscipit nulla blanditiis nihil accusamus. Eligendi dicta ex a nisi ut vero consectetur. Officiis ipsam cum aliquam velit possimus. Inventore aut iusto autem accusamus quos minima. Dolor sequi a temporibus occaecati placeat aut. Possimus nisi nulla deserunt maiores non. Delectus ut tempore impedit. Aliquam velit quia facilis quibusdam voluptas ipsam cum laudantium. Excepturi ducimus labore sapiente architecto quam ratione fugit. Expedita exercitationem aliquam nostrum. Fuga vel hic aut reprehenderit quidem sed magni. Enim delectus impedit officia repellat laborum occaecati sed iusto quos. Quisquam a alias placeat autem maxime. Quidem quae beatae est dolores. Rem optio molestias suscipit laborum nemo.

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