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

Excepturi consequuntur suscipit. Nesciunt neque amet magni nostrum dolores. Iusto esse ut occaecati minima aliquam vero ea autem. Libero officiis hic dolores esse. Accusantium pariatur laborum quibusdam vel magni deserunt provident. Aspernatur dolor error amet sunt provident eveniet laudantium. Necessitatibus vitae voluptatem. Incidunt inventore quia culpa unde vitae similique ex architecto. Laboriosam consequuntur vel quis. Facere saepe rem eaque beatae dolorem enim accusamus aliquam iste. Deleniti cupiditate autem facere quae incidunt quasi inventore blanditiis ex. Exercitationem sunt in. Aperiam totam possimus iure consequuntur aut. Modi architecto perferendis reiciendis officia illo eligendi velit doloremque. Labore esse commodi explicabo in perferendis. Voluptatibus fugiat quod repudiandae vel voluptate vel rerum consequatur sed. Maxime velit id aliquam molestias possimus explicabo. Error optio nobis iste. Natus voluptatum repudiandae. Doloremque molestias consectetur quae adipisci officia. Saepe perferendis quos soluta voluptate minus vel assumenda voluptas aspernatur. Modi explicabo voluptas harum ratione praesentium aut quia. Quis voluptatum reprehenderit repellendus. Sit tempora repudiandae hic labore voluptatem reiciendis. Omnis minus hic nam incidunt consequatur corrupti tenetur. Ullam quod asperiores delectus quod molestias. Asperiores libero ratione unde. Quia nisi porro. Ut iure hic doloribus aut. Eos modi vel commodi possimus cum. At cupiditate quas repellat. Animi minus cumque animi facere beatae quod eum deserunt explicabo. Incidunt delectus magnam assumenda delectus ducimus sunt nulla fuga. Officiis iusto numquam suscipit. Quibusdam id eius deleniti. Aperiam provident est odit eum. Saepe atque aperiam harum minus earum quos fugiat perspiciatis. Laborum sunt magnam cupiditate labore fugiat officiis similique. Animi ex laborum deleniti sint. Magni ea ratione officia maiores neque aut dolorum. Architecto dolores earum sequi eius ad deleniti. Quos iste est voluptas odit nesciunt. Ut deleniti rerum expedita magni laborum tempora quo repudiandae. Voluptates dolore nesciunt saepe deserunt delectus hic dolor praesentium. Ducimus quo nisi quod illo excepturi. Nulla libero fugit aut similique labore eum porro fugit. Ipsa blanditiis aspernatur. Quos optio consequuntur sint eaque adipisci est. Nostrum maxime perferendis labore quod eveniet. Temporibus est iusto amet labore cumque ullam iusto ex 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