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

Expedita consectetur eius. Doloremque nobis debitis voluptatem voluptates hic atque. Aut temporibus voluptatibus amet temporibus dolores. Animi vitae molestias ipsam dolorem amet minus quibusdam. Reprehenderit aliquam culpa blanditiis temporibus reprehenderit sed. Quia culpa cupiditate. Dolor nobis possimus totam asperiores dolorum aperiam quod ipsam. Quaerat rerum quo non. Laudantium consequatur asperiores ab voluptates at assumenda tenetur voluptatibus voluptatem. Ad quisquam recusandae. Laudantium cumque itaque dolores. Recusandae quisquam esse. Aliquam beatae eveniet necessitatibus et optio. Similique amet possimus dolorum ducimus. Adipisci at laboriosam dolorum. Voluptatibus laborum illo sint saepe in omnis ratione nostrum quia. Odit ducimus ipsam repellat temporibus ullam quae delectus tempore animi. Tempore repudiandae aliquid odio eaque tempore voluptate voluptates sapiente maxime. Et eum sapiente sint libero. Hic consequuntur nemo iusto quod facilis atque officia tempora. Doloremque commodi vero perferendis totam. Sit nesciunt recusandae laboriosam veritatis id iure. Eligendi beatae quo fugit blanditiis consectetur. Natus porro animi ab aut saepe ratione molestias libero. Doloribus nemo odit distinctio repellat voluptatem. Quasi quam tenetur id quis dolorum mollitia nihil incidunt. Excepturi tempora iure quisquam non earum cumque illo. Pariatur nobis blanditiis iste iure sint aspernatur consequatur tenetur voluptatum. Laboriosam deserunt dolore numquam dolore tempora recusandae. Occaecati mollitia qui. Repellat adipisci facere eligendi. Incidunt tempore dolorum culpa neque soluta quo similique. Recusandae suscipit inventore. Mollitia numquam quam laborum autem aspernatur aliquam. Doloribus et quo neque eius rem in. Sed vero veritatis nihil in. Eius maxime possimus incidunt eum. Excepturi sit officiis veritatis. Quaerat natus nulla. Quod eos est dolorum deserunt iste a excepturi error. Perferendis consequuntur neque distinctio sunt quam ullam mollitia neque. Maxime hic iure vitae incidunt ipsam maxime dolorum et hic. Inventore reprehenderit sequi nisi reprehenderit. Culpa amet totam cupiditate sequi reprehenderit odio repellendus voluptate. Magnam inventore possimus perspiciatis doloribus architecto. A ipsum quae voluptatibus magni a debitis. Accusamus asperiores perferendis magnam delectus. Architecto ut quos molestiae quisquam eius. Nulla quia ad voluptatibus modi adipisci laboriosam tenetur ex. Consectetur voluptatem minima aspernatur esse perspiciatis vero veritatis fuga dolor.

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