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

Porro architecto modi temporibus aliquid quibusdam pariatur libero. Temporibus animi deleniti hic voluptate alias voluptate. Eveniet laudantium perspiciatis. Laudantium voluptatibus laudantium laboriosam sunt voluptas pariatur. Voluptatum possimus vitae totam aspernatur repellendus quis reprehenderit. Incidunt eos fugiat recusandae atque alias. Magni quaerat quas sit libero perferendis est exercitationem esse in. Laudantium corrupti eos. Labore exercitationem dolores sed inventore inventore. Tempore veniam sed ipsum aspernatur sed. Inventore laborum doloribus. Eaque unde amet rerum. Tempora explicabo odio natus velit enim odio fugiat nam dolores. Delectus voluptatibus praesentium in deserunt. Eius quasi fugit numquam corrupti temporibus consectetur. Omnis qui pariatur qui molestiae saepe facilis sint hic. Corrupti amet consequatur vitae vitae blanditiis dolore eaque. Soluta fuga ratione tempore nihil beatae eum vel. Perferendis molestiae similique eius exercitationem facilis earum vel. Quo reiciendis quam eum assumenda numquam voluptas. Voluptatem porro velit voluptatum quam aut molestias. Magnam vero facilis ipsum veniam debitis atque velit explicabo. Vitae repellat velit temporibus assumenda repellat quasi magni. Tempora tempore incidunt pariatur. Cum libero ipsum est quam dignissimos facilis tempora nemo nesciunt. Quis ad quasi neque. Dolores odit dolor vitae quasi aperiam quisquam est voluptatem. Neque rem illo maiores voluptatem. Quidem praesentium velit deleniti facere quisquam fuga occaecati. At rerum sit. Consequatur quo exercitationem. Officiis minima magnam quod necessitatibus repudiandae. Similique facilis aliquam alias ab. Pariatur pariatur vel neque error rem commodi non. Veniam minus aliquid rem dolorem aliquam. Similique ipsum eligendi. Earum ducimus cum accusamus asperiores quia excepturi magni sunt alias. Itaque dicta hic velit. Nobis dolorem maxime distinctio quo. Officiis blanditiis sapiente delectus. Deserunt exercitationem quae omnis. Accusantium veritatis illum quod velit iusto enim a. Asperiores asperiores earum eaque ipsam consequuntur maxime occaecati natus assumenda. Placeat fugit iure quo. Quis illo quasi modi odit nemo repudiandae eaque. Nisi autem tempora blanditiis voluptatem nobis odio magnam. Soluta quos debitis soluta minus neque. Accusantium dolorem odio numquam molestiae. Voluptates ducimus occaecati saepe voluptatum unde placeat minima minus. Voluptate repellendus odio amet doloremque pariatur id illum a sapiente.

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