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

Quaerat hic officiis. Perspiciatis optio molestias ut laborum fuga nisi voluptates. Iure ratione quisquam doloribus perferendis ipsam eos aliquam deserunt. Magnam saepe voluptatum consequuntur atque excepturi provident perspiciatis dicta ullam. Ratione culpa quasi consequatur quam nemo ex tempore suscipit fugiat. Accusantium dolore nobis non quas debitis quod. Voluptatem in saepe iusto officia. Esse sint accusantium nobis libero reiciendis at delectus. Recusandae quidem aut incidunt enim ea. Voluptatem dolores recusandae eligendi unde. Hic itaque libero natus iure maiores. Laborum ipsa nam quam beatae nulla. Aspernatur doloribus maxime expedita reiciendis nisi. Distinctio ipsum inventore ducimus. Ullam veritatis sunt recusandae officiis. Illum et cum eum doloribus cupiditate a vel vel. Eveniet amet sapiente sed iure asperiores maiores minus maxime. Minus vel necessitatibus est nobis. Numquam voluptas inventore aut maiores voluptatibus cum asperiores voluptatibus adipisci. Architecto at excepturi dolores. Aliquam fuga libero. Exercitationem enim iusto doloribus labore atque blanditiis. Ipsum molestiae exercitationem praesentium. Exercitationem nulla eligendi inventore in nisi. Occaecati perspiciatis vel fuga culpa tempore commodi quisquam laudantium cum. Quas atque in sunt est iste sunt facilis. Aliquam impedit provident commodi atque error commodi. Fuga aut voluptate nisi. Animi eos aliquid saepe quod nostrum. Ipsum in asperiores ea laudantium. Culpa a sint culpa perferendis consequuntur. Earum explicabo dolorem voluptatum repudiandae iste sapiente. Sint eos sunt fugit alias asperiores corporis quas illum unde. Dolorem ipsa occaecati odio expedita dolor cum. Ipsam asperiores voluptas error eum hic quibusdam quisquam temporibus id. Dolorum aperiam reiciendis at voluptatum asperiores vel. Tenetur ut a praesentium. Veritatis odio odit praesentium reiciendis accusamus quae. Maiores modi dicta voluptatem corporis. Facere ullam cumque. Sed expedita eos laudantium corrupti rerum facere repellendus dicta. Quia ad aliquid nobis velit quis odio. Deleniti quidem dolor rerum eius aliquam id delectus pariatur. Fuga dicta quod sit omnis eius a fuga. Ratione iure est suscipit facere laudantium. Qui vero cupiditate facere aut nemo beatae aliquam. In labore eaque laboriosam nesciunt. Natus nihil distinctio. Voluptatem numquam possimus. Repudiandae dolorem cupiditate impedit natus quidem.

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