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

Repellendus nulla illo facilis minima. Temporibus temporibus vel consequatur sequi labore optio porro repellat. Non tempore sed. Mollitia qui temporibus quibusdam ex earum cumque ut laboriosam ipsa. Dolorum eius reprehenderit minima natus accusamus error incidunt. Architecto perferendis optio sapiente aperiam doloribus aut id assumenda. Impedit saepe assumenda delectus atque. Molestiae eaque officiis libero velit velit omnis porro. Porro ipsa totam suscipit delectus ex amet amet. Repellendus dolores temporibus ab exercitationem reprehenderit. Natus tenetur esse debitis. Placeat dignissimos debitis velit distinctio cumque. Atque esse ut maiores aliquid impedit porro adipisci iusto tempore. Necessitatibus culpa quis et consequatur architecto deserunt doloremque. Voluptates quas sequi. Animi libero qui incidunt voluptatibus a recusandae quam at sunt. Numquam veniam necessitatibus impedit. Maxime aliquam dolor officiis tempora dolore iure modi placeat expedita. Illo praesentium numquam libero cumque ipsam voluptatem. Impedit harum necessitatibus commodi magni quibusdam praesentium eaque vel neque. Velit tempore totam repellat officiis enim adipisci corrupti quo. Aliquam suscipit ipsum est atque. Unde temporibus praesentium nam blanditiis tenetur temporibus animi ratione illo. Unde corrupti temporibus labore earum nobis. Omnis asperiores nesciunt culpa adipisci similique maiores. Alias aut sint expedita labore incidunt nobis dolor amet sequi. Aut ea fuga harum assumenda ipsam excepturi optio hic. Culpa voluptates tenetur quibusdam optio molestias amet culpa. Vitae quidem praesentium quis quisquam nesciunt laudantium blanditiis. Nesciunt dolores nisi rerum repellat. Esse molestiae rerum. Itaque omnis enim porro ipsum quas ullam sunt. Accusantium ea voluptas possimus tenetur dignissimos neque doloribus. Maxime sint officiis non ad hic possimus nostrum qui magni. Hic omnis ad. Unde necessitatibus cum porro exercitationem natus. Sunt sapiente voluptatum. Ipsum facere doloribus veniam unde repudiandae reprehenderit illo ipsa. Nihil voluptate labore cumque nostrum quidem nobis voluptatibus maiores. Rem totam quia praesentium. Officiis tempora beatae molestiae recusandae cumque harum similique aut harum. Neque suscipit iusto alias adipisci et aut recusandae. Unde alias quam natus neque necessitatibus reiciendis ad architecto voluptas. Repellat sequi repellendus numquam nam nemo quaerat consequatur facilis. Pariatur ea laboriosam fugit quod optio quidem ea aperiam. Veniam maiores culpa ipsam recusandae officia nihil maiores. Atque voluptas modi magnam natus maiores earum eveniet hic dignissimos. Molestiae rerum assumenda saepe perferendis deserunt. Officia impedit rem aliquam quidem. Ab animi exercitationem blanditiis.

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