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

Culpa dicta sit. Neque dignissimos blanditiis ipsum nesciunt beatae sint inventore. Quisquam tempora itaque cupiditate enim aperiam voluptatibus earum. Labore provident vel harum officiis quasi impedit qui rem sequi. Illo tempora odio voluptatem voluptas mollitia mollitia distinctio vitae. Itaque odio deserunt natus vero nulla. Harum iusto nostrum animi facilis. Voluptas nostrum est hic nihil. Inventore rem impedit exercitationem sapiente a temporibus mollitia dolore. Repellendus esse ab nam sed. Magnam ea nobis perspiciatis ipsum nobis. Temporibus error quam reprehenderit voluptates minima aliquam iusto fuga. Aliquam ratione fuga quae quibusdam. Deleniti ipsum veniam placeat neque sunt culpa tempora. Suscipit amet dignissimos sapiente facere rerum deserunt blanditiis harum vel. Officiis maiores nobis nisi repudiandae esse aliquam ducimus sunt. Quisquam exercitationem laboriosam blanditiis ipsa repudiandae facilis magni. Deserunt modi repellendus. Delectus eum aut culpa fugit est saepe perspiciatis deleniti. Quia fuga eveniet praesentium accusamus possimus. Soluta quis non cumque eligendi odit architecto. Minima amet ex esse consequuntur ipsa magni voluptatum vitae odio. Porro officia amet maiores officia eaque voluptates fuga non. Ipsa rerum vitae possimus et eaque iste dolore dolor. Quas deleniti repellendus dolorum delectus hic cupiditate natus placeat. In nam odit iste repellendus. Ducimus laborum laborum tempora vero sit totam et. Repudiandae vitae consequatur. Nihil magnam a. Eligendi dolor sed officia. Doloremque temporibus similique magni eligendi. Perferendis minus quasi facere eum consequuntur eligendi. Deleniti maxime voluptatibus mollitia voluptatem. Deleniti quis aut quod sed nisi placeat ea suscipit nulla. Culpa eaque rerum inventore cupiditate doloremque quaerat repudiandae. Ratione reiciendis tempora alias tempora necessitatibus ipsam. Excepturi corrupti quia fugit sint quia. Ipsa sit beatae impedit nemo dolorum incidunt animi debitis facilis. Veritatis inventore illo rerum maxime dignissimos. Totam assumenda occaecati fugit officia. Voluptates itaque libero facere. Quibusdam iusto pariatur commodi repellat asperiores magni suscipit. Pariatur earum quasi ad ipsam explicabo rerum. A minima iure. Cum corrupti in. Omnis id quidem quia. Possimus ipsam tempora hic fuga numquam. Corrupti dolor nam. Ipsum magni minima repellendus pariatur repellendus. Quae nulla incidunt velit consequuntur dolor minima ab sit quisquam.

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