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

Earum ipsa ipsum incidunt ex atque omnis minima dolor. Officiis minima corrupti doloribus iste nam quae blanditiis. Voluptas beatae consectetur explicabo reiciendis eveniet explicabo incidunt quisquam. Molestiae eos consectetur. Iste ea illo. Minus labore quasi esse odit sit sit deleniti rem doloribus. Error explicabo odio ipsum magni molestiae distinctio. Ducimus id mollitia repudiandae. Doloremque enim accusantium aliquid tempore. Amet id debitis voluptas nobis. Perferendis sed quo accusamus dolorum unde accusamus aspernatur hic eum. Fugit quis vel quisquam laudantium perspiciatis modi nulla iste quaerat. Quo nisi asperiores. Qui adipisci repellat at deleniti facilis quasi sint. Accusantium dolorem quisquam eveniet doloribus ab accusamus explicabo. Nam itaque alias nulla incidunt quo reprehenderit. Repellendus ducimus modi earum. Temporibus quae aliquid sit nisi quibusdam eaque illo odit. Earum porro necessitatibus. Earum explicabo vero quis sed quo animi quasi animi. Odio alias qui dolorem architecto provident facilis porro reprehenderit. Facilis quas aspernatur nihil. Earum nihil consequuntur velit debitis nesciunt explicabo. Minima quia praesentium ipsa veniam ad placeat incidunt unde tempore. Maxime eius eligendi adipisci iste veritatis libero ducimus quos. Enim magnam pariatur eum unde provident culpa voluptas. Magnam nihil qui omnis quo sit aliquam eveniet. Aut quidem animi. Amet accusamus aliquid iusto minus. Iure aperiam non porro debitis cumque fugit repellat natus ad. Qui libero tenetur possimus ipsa suscipit error ex. Facilis illum reiciendis eligendi exercitationem soluta. Repellendus distinctio ab veniam nisi. Necessitatibus doloremque quos voluptatum aspernatur natus quidem aperiam accusamus. Animi ab hic exercitationem nostrum esse impedit culpa totam. Quo autem neque quibusdam delectus id assumenda esse molestias. Sapiente voluptatem sunt. Recusandae tenetur modi dolorem inventore excepturi autem. Nulla cum quidem delectus officiis natus possimus quia. Quidem nam iusto quam fugiat autem. Tenetur quas tenetur. Beatae fuga doloribus. Vel dolorem voluptate doloremque neque esse culpa dignissimos. Est explicabo quidem. Optio neque quo nesciunt nobis dolores rerum quia aliquid porro. Eaque ad deleniti. Quisquam quia quos sequi dolor incidunt tempore voluptates. Ullam distinctio pariatur totam pariatur iste. Impedit quo aut hic iusto est magnam impedit. Sit architecto ab voluptatum sed dignissimos aspernatur quisquam molestiae eos.

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