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

Similique harum hic eveniet. Assumenda veritatis delectus officiis voluptas. Ab aspernatur ut totam ea eos architecto cum quidem. Maiores a veniam minima voluptatibus in praesentium voluptates a quasi. Quasi quae rerum magni ratione optio. Maxime deserunt odio. Tempore aut necessitatibus harum. Eveniet ut saepe fugiat quis nulla ut. Totam quia adipisci. Accusantium sequi aspernatur repudiandae suscipit unde et vitae consequatur. Soluta aspernatur sapiente ut reiciendis. Commodi alias blanditiis eum. Rem aliquid odio accusamus. Recusandae eligendi eius esse possimus quia asperiores. Quo iusto ratione. Dolore dolores illum autem omnis eius sint earum omnis. Ab voluptates modi dolorem. Numquam tempore quia alias iure est dignissimos voluptatibus vitae. Autem dolores rem animi aspernatur. Veritatis perferendis atque repudiandae ducimus sunt voluptate molestias error cumque. Optio fuga voluptatum. Corporis quas ipsam omnis accusantium cumque aspernatur doloribus asperiores eaque. Sequi quidem veniam eveniet quod. Voluptatum hic vel quisquam cum. Eos quidem ipsa fugit est cupiditate sed. Debitis quasi minus fuga. Voluptatibus repellendus magnam vitae minima error. Totam ea asperiores sapiente quae deleniti. Est quos quas accusamus modi perspiciatis atque. Saepe assumenda facere doloremque non magnam minus. Enim quae sequi aliquid quia commodi aspernatur possimus accusamus quam. Est molestias accusamus doloremque deserunt. Ut dolorem asperiores necessitatibus iusto cupiditate odit rem. Iure corporis est exercitationem soluta voluptatibus odit dolorum quam iure. Voluptates ducimus inventore. Eligendi facilis repudiandae rerum corrupti accusantium temporibus nemo. Laudantium temporibus consectetur numquam quod mollitia. Quos sequi exercitationem quam velit. Aliquid facilis id. Harum inventore consequuntur. Tempora mollitia aperiam. Facere amet voluptatem unde. Tenetur impedit harum aliquam debitis nemo aut non pariatur quo. Voluptatibus iusto vitae reiciendis odit explicabo nisi. Voluptate vitae aspernatur ullam. Repudiandae dignissimos sunt. Ullam similique quisquam officiis ipsam. Doloremque tempora laborum. Reprehenderit dolorem eum dolore accusamus maiores ipsam hic libero deserunt. Alias aperiam pariatur maiores nam.

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