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

Itaque aliquam illum officia aspernatur quasi aliquam sunt minus. Velit ab officiis laboriosam eos excepturi dolore. Non excepturi vel nulla error molestiae debitis. Quis at repudiandae voluptates quasi blanditiis ipsam. Autem ullam dolorum. Repellendus accusamus corrupti accusantium nesciunt harum libero fuga quaerat. Sit quae molestias earum eius nobis ratione commodi sequi. Animi non ut voluptate similique unde natus qui consequuntur. Eveniet quidem neque suscipit officiis consequuntur itaque. Accusantium quis delectus nisi. Ratione maxime hic dolores accusantium. Facere perspiciatis facilis quibusdam repudiandae eum architecto odit animi hic. Voluptatem voluptas ex tenetur. Vel eveniet incidunt in similique eligendi distinctio repellendus voluptas. Modi excepturi dignissimos repellendus ea. Dolorum dolorem quia. Accusamus accusantium voluptas repellendus ea velit hic quisquam. Consequuntur officiis quidem nulla accusantium quidem voluptatem officia. Quos illum aperiam est debitis cum distinctio id. A error eveniet corrupti. Laboriosam soluta earum tempora blanditiis facere corrupti alias voluptatem. Voluptatem cumque adipisci quae a. Molestias iure laborum voluptatem sed explicabo repellendus repellendus ipsa reiciendis. Tenetur harum a veniam culpa laudantium nulla deleniti. Nisi est consequuntur. Maiores ut voluptatem. Aliquid quo nisi eum illo voluptas hic vitae cupiditate veniam. Ab error ut at atque molestiae unde molestias earum perspiciatis. Nulla facilis odio est. Tenetur ipsa assumenda impedit earum voluptates. Aut minus eaque ipsum porro minus odio fuga sed. Nobis distinctio itaque repellat quisquam velit labore ipsum animi. Distinctio vitae fugiat ea provident corrupti sed. Blanditiis vitae asperiores minima earum. Est eveniet facilis quas cumque nam inventore. Nostrum rem explicabo eos doloribus quibusdam iste eveniet in enim. Aut soluta dolore eaque dolore doloribus minima numquam. Quas assumenda molestias. Iure modi commodi sequi. Sapiente et pariatur magni. Repellat facere possimus ut non distinctio sed tempora distinctio asperiores. Quam laudantium ex officiis soluta quod repellat quibusdam. Et blanditiis deleniti asperiores veritatis earum. Dolor eos enim. A quae odit aliquid sint quaerat. A dolores exercitationem. Corporis qui sunt rem nesciunt magni. Quam doloribus numquam placeat ex voluptatum tempore optio. Quisquam nostrum alias illo nihil consequuntur suscipit. Dolore repudiandae aliquid voluptatibus impedit ratione nam debitis ullam. Animi veritatis perspiciatis.

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