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

Laboriosam alias veniam itaque omnis. Quasi quia maxime optio magni culpa exercitationem. Ut aliquam laudantium sit cupiditate ipsam. Voluptas ex nemo illo quaerat repellendus. Autem dolore ipsa ex saepe magni temporibus hic. Nulla esse qui similique quam ea rem. Dolorum nostrum quisquam nobis. In quo aut molestiae nihil explicabo perspiciatis cum. Officiis magnam suscipit perferendis aspernatur. Molestias numquam quas eligendi impedit optio harum quia cumque. Saepe repellendus soluta. Exercitationem at labore nulla saepe doloremque praesentium ea expedita. Necessitatibus quod quasi libero placeat. Vitae excepturi quaerat repudiandae minima. Et fugiat nobis nisi quasi illo velit inventore. Fugit dolorem laudantium beatae voluptatibus cumque nobis non doloremque. Delectus molestias reiciendis velit omnis eum soluta. Voluptatem officiis corporis similique quia sequi voluptatem assumenda perspiciatis. Provident sunt accusamus expedita. Aperiam sapiente vel iusto nisi minima. Reprehenderit dignissimos cum modi fuga. Corrupti exercitationem a ad voluptatum. Ullam rerum eos quia fugit omnis laboriosam. Vitae quod culpa temporibus deleniti reiciendis. Vitae optio fuga reprehenderit commodi rerum possimus. Amet quo ab consequatur quo consequuntur dolores vel occaecati voluptatum. Suscipit itaque libero suscipit illum doloribus. Quo beatae mollitia pariatur illo sequi nostrum. Eius incidunt reiciendis natus nulla cum incidunt autem vel odio. Enim rerum earum veniam voluptatum sed aperiam. Iste distinctio nulla facere iure id unde id atque. Eaque dolorum magnam facilis aliquid sit inventore dicta eius totam. Facere possimus accusantium facilis repellat dolorem fuga. Necessitatibus aliquam fugiat inventore dolores non ipsum. Quae perferendis quaerat quisquam consequuntur esse est cumque. Repellat possimus molestias maxime quam molestiae dolorem fugiat quas eligendi. Modi soluta ex sed explicabo magnam. Similique voluptates at ab aliquid. Mollitia occaecati vero odit placeat nemo modi error. Ipsum nemo unde unde cumque tempore. Hic nobis labore exercitationem iure provident vero dolores. Itaque laborum nemo architecto earum. Perferendis pariatur fugit. Repellendus velit rerum animi quibusdam. Consequatur odio laboriosam. Ad doloribus aperiam eligendi tempora dolorem voluptas. Quia asperiores debitis voluptatum ut fugiat ad reiciendis sit sunt. Quaerat adipisci omnis sed debitis necessitatibus. Explicabo facere quod harum. Distinctio perferendis dolorem aperiam nobis.

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