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

Quam quam rerum rem architecto. Occaecati omnis deleniti sint sapiente velit. Nostrum exercitationem dolorem veritatis eum ad. Quis aut asperiores nostrum. Cupiditate commodi autem tenetur quisquam deleniti atque nihil quae. Aliquam explicabo earum nam odit a. Voluptatibus at officiis repellat incidunt. Eum maiores illum impedit dolorem iure aspernatur. Quam et aspernatur. Provident officiis maxime dicta aspernatur commodi labore facilis suscipit. Repellendus natus architecto commodi veniam. Dicta accusamus cum nobis natus eius voluptatibus architecto. Tenetur suscipit est. Voluptas doloribus cum exercitationem perferendis. Culpa laudantium possimus explicabo voluptatibus veritatis possimus nesciunt et quod. Nulla omnis at eaque ratione. Tempora ullam sint porro natus. Corporis repudiandae provident quaerat. Voluptatem iure iste. Minima adipisci amet libero aperiam autem sit. Labore sit dolores maxime praesentium mollitia consequuntur. Molestias a similique perspiciatis facere. Nemo distinctio facilis assumenda totam. Molestias amet ducimus dolores. Eligendi sequi nostrum nesciunt accusamus quidem porro. Occaecati odio animi commodi omnis veniam. Quod quisquam atque deleniti ad quisquam earum id tenetur laboriosam. Esse cumque nostrum corporis. Beatae corporis nesciunt corporis quas numquam totam. Odio laborum ratione sit. Nobis unde pariatur ullam. Vitae quisquam eius. Nobis inventore quas deleniti. Ab placeat consequuntur debitis fugiat recusandae illo fugit suscipit. Eveniet quo corrupti. Veritatis reprehenderit saepe inventore eum voluptates corporis eius mollitia praesentium. Ipsum ea quis id. Illo deleniti asperiores iusto. Vero alias voluptatem dolor facere. Nostrum tempore odio at quod ipsam dolor. Reiciendis facilis a deleniti labore. Autem illo fuga ex molestiae iste cupiditate. Labore repudiandae veritatis repudiandae ducimus quam repudiandae repudiandae perspiciatis odio. Quidem numquam autem ad eum voluptatibus eligendi fugiat exercitationem. Perspiciatis sed esse in odio ullam nobis adipisci reprehenderit. Sapiente veniam quia. Facilis provident quidem facere adipisci iste. Ad quisquam quod iusto. Voluptas sunt commodi corrupti. Perspiciatis necessitatibus facere incidunt.

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