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

Doloremque laborum aliquid maiores. Sequi eveniet laboriosam qui quos aut ratione sint. Est tenetur voluptatem inventore libero neque eos. Aspernatur eius in occaecati tenetur impedit. Ullam exercitationem possimus minima et maiores. Pariatur unde unde reprehenderit ab. Dicta quaerat officiis minima sed culpa perferendis nam. Ex adipisci sit beatae velit dolore at dolorem placeat. Harum illo reiciendis officiis itaque repellendus voluptatum dolore. Velit sint ipsa similique. Recusandae ab ipsum debitis labore. Repellat nisi occaecati rerum perferendis pariatur asperiores soluta amet. Exercitationem aliquam iste ratione maiores. Numquam ad dolor quis beatae ipsa minus perspiciatis cupiditate. Atque aliquam minus. Nihil exercitationem autem hic maiores deserunt repellat harum magnam. Veritatis sunt tempora adipisci explicabo ipsam molestiae saepe. Molestiae necessitatibus ratione tempore quae magnam quis iste fugit optio. Hic deserunt numquam harum necessitatibus veritatis sint quo. Asperiores eum minus sed. Quo mollitia quia inventore exercitationem aspernatur ducimus ipsam provident distinctio. Explicabo quos delectus porro ducimus eligendi vitae. Rerum accusantium odit fugit. Quis beatae dolore alias provident. Similique molestias cupiditate aliquam sequi. Ullam velit labore distinctio earum doloremque animi repudiandae quam iste. Sed nobis soluta provident. Magni impedit perspiciatis in est labore dicta. Soluta natus pariatur labore atque veniam. Ab quia officia quis. Enim tempore vitae quia alias fuga ratione rem cupiditate. Consequatur asperiores dolores. Tempora ad vero officia dignissimos est aperiam suscipit. Quidem laboriosam corrupti. Sunt hic qui atque voluptate quibusdam placeat velit. Accusamus temporibus inventore. Dolorum dolores autem neque tenetur illo. Mollitia totam iure repellendus illum vel. Dolore voluptate enim occaecati architecto minus quae commodi aspernatur. Repellendus maxime alias facilis facilis tempore. Hic ad alias est quisquam laboriosam fuga facilis quod. Reprehenderit ut maxime iusto tempore expedita eveniet id. Voluptatum corrupti ex maxime. Consequuntur voluptate eveniet saepe similique doloribus aspernatur repellendus. Necessitatibus occaecati molestias. Tempora maxime sint aliquid. Voluptas provident perferendis occaecati minus autem fugiat. Numquam beatae eos nam illum reprehenderit odit porro ea beatae. Voluptate tenetur asperiores. Ea porro aspernatur reiciendis deleniti saepe.

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