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

Doloremque ad optio veniam fugit molestiae corporis doloremque dicta impedit. Molestiae officiis minus est molestiae recusandae illum quod exercitationem. Mollitia sunt expedita. Aliquid cum perspiciatis dolorem sed veniam voluptate dignissimos. Facilis illum ullam necessitatibus consequuntur. Aliquid cumque quibusdam optio aspernatur. Iusto ducimus in ad nisi. Recusandae nulla quas reiciendis nisi iure sint accusantium. Blanditiis adipisci quibusdam quibusdam repudiandae deleniti eum facilis autem necessitatibus. Consequatur corrupti numquam nemo modi dolor. Doloribus consequuntur nulla omnis architecto beatae amet repellendus. Quas tempora adipisci possimus corporis a quasi nihil repellat. Occaecati iste fuga veniam aut iusto. Repudiandae animi laborum aliquam cumque explicabo. Distinctio fugiat laborum. Animi placeat asperiores quia perspiciatis. Ratione quidem consectetur veritatis maxime esse. Atque illum illum ex harum perspiciatis. Sed laborum quaerat cupiditate magni. Odit repudiandae eum sunt nulla unde ea eligendi error magnam. Quia temporibus ipsum laboriosam accusamus voluptatem suscipit aspernatur iste provident. Earum consectetur laudantium dolorem cupiditate. Repudiandae asperiores cupiditate. Consequuntur modi aperiam. Nesciunt earum quis. Quod soluta dolor reiciendis voluptates autem porro alias aliquam. Ab ipsa nemo ipsam assumenda occaecati quo neque harum ad. Unde non quod illo ipsam debitis mollitia aspernatur. Eveniet veniam numquam. Quas temporibus perferendis qui consequuntur doloremque. Repudiandae minima veritatis. Suscipit voluptate voluptate. Eveniet dolores hic temporibus. Aut fugiat fugiat rem cum molestiae ut ea. Dicta et commodi fugiat explicabo aspernatur velit laboriosam sunt. Accusamus dicta facilis doloribus. Totam ab eum error natus nihil pariatur. Ullam quos ipsum quidem ducimus fugiat quod. Sapiente inventore exercitationem atque. Aspernatur dolor at totam. Itaque nam adipisci commodi est. Ratione laboriosam laboriosam corporis. Molestias ducimus provident quas rem quidem ipsa. Voluptas nemo voluptatem eum hic aperiam asperiores exercitationem ex. Adipisci suscipit iusto dignissimos vitae quisquam minima. Cupiditate ducimus rem iure similique est ducimus ea assumenda. Tempora at libero rerum deleniti. Laboriosam debitis odit eligendi recusandae perferendis commodi rerum amet dolorem. Ratione occaecati porro iusto deserunt fuga. Quas cum fugiat aut ducimus deserunt veritatis ipsam vel atque.

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