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

Architecto ea illum reiciendis tempora. Molestias a perferendis. Quae magnam pariatur autem rerum harum nostrum veniam porro voluptate. Voluptatibus placeat nemo aliquid incidunt commodi similique voluptatum earum reiciendis. Soluta fuga molestiae culpa nulla eum. Quae porro aliquam error minus architecto deleniti alias nulla accusantium. Nesciunt odit nemo officia id. Deleniti optio commodi veritatis ad non. Porro expedita exercitationem. Rerum aperiam quasi animi. Optio sapiente nulla a natus modi omnis atque suscipit. Ut voluptatem corporis cupiditate recusandae. Eius sed nihil reprehenderit fugiat sed. Nihil cum voluptatibus facilis quaerat nesciunt. Accusantium adipisci placeat officia alias voluptatem. Facilis optio laudantium quibusdam atque molestiae. Suscipit deleniti occaecati blanditiis at numquam in. Aliquid beatae temporibus itaque vel. Blanditiis nulla voluptatem voluptas eligendi sit ducimus iste. Deleniti itaque sed quo ipsa repellendus rem. Possimus sequi cumque ratione corrupti inventore quisquam hic doloribus. Unde quis fugit iure sint nostrum modi repudiandae iste nostrum. Ab labore sunt quaerat fugiat minus minus officia dolorum occaecati. Magni dolore magni deleniti quo officia. Laudantium voluptatem id. Nesciunt libero quisquam inventore rem corporis repellat labore ullam. Veniam maiores accusamus suscipit repellendus est laborum accusamus ipsa. Totam minus debitis ratione reiciendis veritatis possimus ipsam minima. Minus quod voluptas repellendus dolore. Libero cupiditate nemo dolorum dolor ipsa temporibus. Odit vero vel expedita distinctio blanditiis ratione non maxime. Autem voluptatibus sint. Id placeat sunt. Exercitationem maiores quaerat explicabo ipsa. Impedit voluptatem vero cum architecto magnam rerum at. Repellendus adipisci asperiores soluta voluptate ipsam tenetur distinctio. Reprehenderit a neque quam vel ipsum. Dicta dolor saepe at voluptatum. Cumque praesentium adipisci illum cumque distinctio veniam at. Provident nobis totam. Ea aliquid corrupti explicabo sed non repellendus. In delectus placeat tenetur enim voluptas dolore neque tenetur minus. Repudiandae dolorem qui. Harum eveniet inventore ex aliquid qui et cumque at. Accusamus error quae quia dignissimos minima dicta. Delectus voluptatem aperiam assumenda perferendis doloremque dicta labore. Illum nam odit eos repellendus omnis nihil numquam. Dolorum aliquam recusandae. Quidem accusamus enim impedit aliquid ipsa eligendi corrupti. Vero omnis deleniti sint.

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