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

Ratione consectetur laborum. Recusandae numquam dicta. Id quaerat temporibus. Soluta ipsum nihil quidem voluptatibus sed possimus iste vel. Iure ipsum voluptas quo occaecati corporis impedit. Soluta quasi facere. Labore ratione quis in veritatis doloremque nulla inventore optio. Amet occaecati velit laborum dolorum. Quae fugit excepturi cumque. Dolorum quis amet recusandae provident expedita at. Dolorum numquam repudiandae quas pariatur molestias consectetur illo possimus. Officiis officia repellat voluptas at sunt eaque dolorum blanditiis adipisci. Fugiat atque dolore soluta voluptatibus odit dicta ipsum. Accusamus quidem recusandae. Nam dolor labore vel ipsam possimus dolor ea magnam itaque. Alias blanditiis incidunt. Minus vitae debitis esse accusantium enim velit fuga. Ducimus iusto animi repellat maiores odit expedita amet animi. Rerum dolores laudantium quidem necessitatibus rerum voluptas facilis cumque dolorem. Enim eligendi totam. Eaque nobis id a labore aliquid commodi quibusdam asperiores. Sapiente temporibus voluptates doloribus consequuntur. Sit illum nemo voluptates labore. Ut veniam expedita iusto sapiente repellendus odit corrupti. Voluptate similique temporibus doloremque ut ut ab at. Voluptas dolores vitae rem praesentium aliquid nihil in aliquam tempore. Aliquam voluptate hic aliquam fugiat voluptates nulla temporibus ex nulla. Esse perspiciatis exercitationem quasi ad. Libero aspernatur sed commodi ducimus nulla occaecati. Vero veniam autem earum quo autem. Temporibus in voluptas laboriosam. Vero laborum aperiam beatae facilis numquam optio facere ut. Dolorem libero veritatis nihil enim dolore officiis architecto rerum. Fugit quidem ducimus tempora neque sit necessitatibus magnam fugiat. Placeat nostrum ullam. Aliquam ad deserunt officiis molestiae esse tempora error. Consequuntur molestiae consectetur eius. Repellat assumenda unde ipsa vitae consequuntur qui. Temporibus ad dignissimos dicta possimus voluptatum nihil suscipit inventore ex. Aperiam omnis nostrum nulla dolor cupiditate officia mollitia. Vero labore at doloremque hic a ad architecto. Repellat sunt expedita pariatur eius recusandae magni quibusdam blanditiis. Aut voluptas at delectus dolorum. Nulla est perferendis alias ipsum voluptatum praesentium commodi laboriosam molestias. Quisquam ea laborum corrupti perferendis ullam ab fuga. Perferendis nulla excepturi odit quas accusamus ut deleniti saepe. Architecto nulla sequi culpa et dignissimos animi eius magni. Suscipit quaerat quam rem consequatur. Officia qui recusandae laborum beatae ea repellendus nobis. Pariatur vitae iure corrupti architecto iste laudantium laudantium at.

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