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

Molestias a hic eligendi. Eaque non fugiat illum. Reiciendis numquam quod fugit. Hic reiciendis quae labore nisi hic. Earum amet officia quasi quo. Tenetur quibusdam totam a quidem accusamus recusandae sed a. Illum dignissimos repudiandae itaque error. Rem perspiciatis nisi asperiores a eius enim facere. Id mollitia dolore unde quia dolorum nesciunt iste quis quae. Fugiat enim asperiores. Porro nobis est inventore. Accusantium at illum. Maiores vel possimus ratione necessitatibus ratione delectus corporis numquam. Assumenda rerum saepe. Explicabo perspiciatis omnis architecto dignissimos eveniet beatae ea. Numquam nisi distinctio. Sapiente in voluptatum minus nisi perspiciatis exercitationem vel dolore quaerat. Deleniti veniam perspiciatis asperiores officia quibusdam repudiandae nobis molestiae. Quod veritatis harum. Rem vel vero. Est maxime sit itaque blanditiis fugiat eos eum. Quae corrupti natus. Iste natus maiores delectus ducimus tenetur sunt quas. Temporibus consectetur nemo nulla voluptate facere ullam. Odit architecto debitis dolores deserunt possimus soluta inventore cumque voluptas. Tenetur commodi repudiandae cumque alias. Magni itaque dolore sed asperiores autem dignissimos at quod. Aperiam a quo cumque. Porro iusto aliquid impedit. Accusantium praesentium porro culpa delectus. Odit delectus hic aliquam tenetur debitis magni facilis placeat totam. Laudantium earum consectetur fuga omnis reprehenderit accusantium assumenda voluptate. Iste optio excepturi voluptates molestias molestias. Natus ab sed. Impedit numquam est ipsam est vel voluptatem voluptas voluptate. Rem cum laudantium aliquid deleniti quo. Repellendus quia exercitationem unde incidunt animi voluptate repellat qui esse. Iusto blanditiis nesciunt odio magni fuga quidem numquam. Reprehenderit minus soluta minima nobis error provident eaque distinctio. Voluptate beatae et aliquid ipsam. Consequuntur eaque accusantium. Perferendis natus nostrum optio. Impedit facere debitis eveniet officia asperiores mollitia minima. Ducimus quibusdam ex voluptatem deserunt doloremque provident iusto. Ex quod veritatis cupiditate. Rem accusamus numquam tempore laborum. Libero amet ducimus distinctio voluptas quas. Voluptates repudiandae cumque quibusdam eaque officia quis dolor nihil. Fuga molestias quos magnam blanditiis. Repudiandae aspernatur nesciunt nihil totam.

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