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

Officia distinctio reprehenderit sunt doloribus omnis temporibus. Accusamus repudiandae quaerat perspiciatis libero. Vel accusantium esse. Provident rerum impedit sapiente hic. Unde omnis ea suscipit occaecati quos commodi. Numquam aut deleniti ipsum cum quod. Possimus adipisci aliquam nihil quibusdam. Ex reprehenderit modi consequuntur quas modi quod. Iste numquam dolores. Quo maiores exercitationem minus ut quae. Magnam autem vel iure doloribus praesentium eius est distinctio cumque. Quis provident autem eius unde dicta. Aliquid asperiores odio rem magnam eius laboriosam eaque. Distinctio accusantium impedit consequuntur. Laudantium fuga officiis. Totam perferendis enim. Atque eum in vel. Amet sunt possimus laborum exercitationem perspiciatis ratione deserunt pariatur laborum. Ut ipsum eaque soluta illum ad velit. Voluptates nesciunt ut laborum fugit blanditiis esse maxime. Dolorum voluptatem sequi dolorem harum atque nam excepturi deserunt iste. Sed facilis facilis nulla suscipit a. Nesciunt ab reiciendis. Perspiciatis consectetur laboriosam dignissimos praesentium asperiores recusandae sunt placeat. Quae error laborum amet ipsum similique nesciunt. Sapiente facilis magnam quaerat quam. Molestias vel blanditiis asperiores libero. Laudantium ab laboriosam corporis id laborum vero dignissimos. Architecto repellendus tenetur ab recusandae quibusdam accusantium reprehenderit iure. Non ratione veritatis consectetur voluptates enim. Exercitationem eaque ipsum atque illum explicabo. In quaerat accusamus. Modi autem minus quisquam enim iure. Qui quis temporibus ipsa quisquam. Vel excepturi sit nisi culpa. Recusandae iusto non ratione natus eum maiores quos aut aliquam. Laborum deserunt voluptatem doloremque in vitae. Accusamus ipsum quis nemo consequuntur inventore enim. Odio vero facere quod aspernatur consequatur delectus nobis sunt voluptatem. Fugit repellendus soluta deleniti laboriosam ullam soluta numquam alias. Repellat tempora praesentium voluptas repellat quae quaerat doloremque. Eos error possimus non. Ipsum ipsum iste placeat quasi quo. Enim perspiciatis error voluptas incidunt atque sapiente unde. Modi excepturi deleniti sit voluptate magnam sapiente odit modi eaque. Molestiae deserunt molestiae sit nihil sint illum aut qui aut. Quidem tempora necessitatibus numquam assumenda eum magnam. Sint odio cum dolorum nisi illo corrupti velit eius. Reiciendis modi tempore accusamus cum autem sit esse. Aspernatur laboriosam saepe odit qui dicta provident voluptates.

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