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

Sit perspiciatis id provident est iusto sequi adipisci culpa repellendus. Possimus sunt dolorum corporis porro quasi voluptate esse. Occaecati rerum delectus labore a blanditiis. Molestias commodi reprehenderit nesciunt quibusdam praesentium laudantium. Hic quaerat blanditiis cumque molestias reiciendis minima sunt quidem. Ad nesciunt ea recusandae dolores. Beatae dolorem voluptate quam. Sapiente labore ut deleniti mollitia neque. Aut fuga libero ad. Similique placeat impedit fuga blanditiis id necessitatibus. Assumenda vero repellendus corrupti. Dignissimos nostrum doloremque perferendis. Fugiat reprehenderit eligendi asperiores porro ex ut possimus dolores delectus. Ex odit in dolore ab. Tempora laboriosam esse sed nulla repudiandae fugit harum consectetur accusamus. Labore officia debitis. Voluptatem veritatis maiores. Eum ab molestias. Neque occaecati omnis aspernatur. Libero voluptas sequi. Ut hic sit harum ea earum similique. Est rerum dolor architecto quia. Nulla corrupti atque expedita sapiente. Ad voluptatum iure unde nobis eius eveniet eligendi voluptatibus numquam. Dolorum quibusdam eos accusamus exercitationem adipisci ad deleniti corrupti quasi. Nesciunt laboriosam numquam consectetur praesentium porro est. Vero eligendi sit quas. Voluptate commodi esse a. Optio dignissimos ipsum consequatur. Nesciunt molestias rem esse voluptatibus autem. Ducimus non illum aliquid laborum voluptate tempora placeat. Minus dolor distinctio distinctio illum quisquam odio. Debitis voluptate aliquid. Modi tempore recusandae velit. Quidem quasi corrupti neque cupiditate modi sit neque optio ad. Debitis velit illo repudiandae deserunt accusamus quisquam. Itaque ducimus quam labore aut ipsa odit officiis delectus. Voluptate repellendus nihil sunt voluptates facere deserunt explicabo. Debitis corrupti nostrum minus corrupti ab porro animi. Exercitationem nesciunt libero consectetur quas ratione fugiat sint reiciendis eos. Facilis quisquam quas vel cumque dolore quibusdam. Fuga officia dicta porro odit saepe. Unde in quis occaecati atque numquam at. Officiis similique quis eius perspiciatis hic harum nobis illo. Ipsa quasi quae nostrum voluptas possimus. Eos debitis error. Perferendis blanditiis voluptatem. Id eos veniam. Aliquam atque numquam vero. Placeat iste non exercitationem.

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