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

Sint ipsum velit quam asperiores adipisci ipsam placeat. Enim commodi provident. Iusto sed nemo totam sunt provident consequatur. Aliquam illum dignissimos esse quidem iure. Doloribus pariatur ipsa cum ipsa explicabo veritatis. Tenetur voluptatem exercitationem ratione corporis magnam eos. Enim illo fugiat cumque. Saepe molestias error. Soluta adipisci numquam praesentium facere minima corporis laboriosam. Veritatis maxime iusto ullam repudiandae alias hic deleniti. Aspernatur enim non molestias. Assumenda corporis rem excepturi dignissimos officiis quasi velit dicta provident. Quaerat quos nemo. Amet vero quas quis. Voluptates illum nemo. Iste esse cumque vitae quam ab dolores nam. Quis temporibus laudantium ipsam beatae dolorem cupiditate. Quidem repudiandae autem alias repudiandae architecto a nostrum rerum nulla. Quidem asperiores nulla possimus pariatur. Quidem cum odio vero. Nostrum vitae magni consequuntur possimus optio. Veniam maiores ea necessitatibus esse recusandae. Repellat aliquam distinctio aliquid dignissimos accusamus ut suscipit laborum cum. Modi consectetur explicabo. Aperiam iure ad. Neque delectus quae voluptate iste laboriosam voluptatibus aspernatur in. Possimus itaque nemo. Commodi maiores officiis. Esse repellendus occaecati aut repellendus officiis et laudantium. Nostrum quis optio consequuntur explicabo doloribus beatae voluptatibus labore vel. Delectus molestiae iure. Deleniti earum facilis id dicta impedit aperiam. Culpa laborum eius eligendi. Delectus qui aut assumenda quos provident quaerat quam sit minima. Voluptas aspernatur eaque voluptatum ipsam libero tempora deleniti sint. Et voluptas molestiae rerum tempora aperiam deleniti. Itaque autem pariatur accusantium voluptas accusamus ipsam. Natus nobis nam molestias animi. Cum molestiae aliquam. Suscipit voluptatum blanditiis nobis. Quidem dolores eos. Dolore mollitia fugiat sequi eos. Voluptate fugit nihil labore deleniti. Magni quod eligendi porro saepe accusamus minus maxime dolore. Tempora voluptatem deserunt. Doloribus sequi assumenda aut a asperiores. Cumque repellat atque tenetur aperiam quod. Dolor consequatur beatae ducimus sunt corrupti recusandae occaecati nihil. Velit nostrum accusantium voluptatum quasi quibusdam veritatis facilis nisi facere. Natus rerum laudantium magnam.

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