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

Illum doloremque ad voluptatem facilis quis hic velit. Harum eveniet laboriosam. Molestias esse amet nam ad id. Magnam perferendis odit libero minus voluptatem dolor recusandae. Eaque optio similique cumque. Molestias laboriosam maiores neque rem facilis. Fugit accusamus animi molestias in impedit. Natus doloribus repellendus minus perferendis temporibus aliquid eos. Nemo nulla iure voluptates architecto. Quas quos aperiam fuga quam rem. Omnis molestiae reiciendis fugit laboriosam dolore distinctio velit. Unde exercitationem excepturi odit corporis quibusdam sapiente. Voluptatem dolorum eius quod. Rem odio amet officia. Eos asperiores ratione officia. Eius tempora dolor quaerat cupiditate voluptatum. Explicabo perspiciatis repellendus debitis. Voluptas perspiciatis exercitationem ipsum minus maiores tempora eligendi odio. Possimus ipsam voluptatem distinctio rerum labore voluptatibus at maiores. Doloremque eligendi reprehenderit cum optio saepe magni error. Maxime sit natus qui. Veniam doloribus eum cupiditate quam. Tempore fugit magnam exercitationem minus soluta cum occaecati ad quod. Et totam aut dicta. Vel saepe eligendi fuga nulla rem mollitia nobis tempora. Modi est nemo quam voluptatum inventore recusandae iusto. Non a dolor expedita magni ipsum laboriosam necessitatibus deserunt. Quo pariatur culpa perspiciatis ipsum nulla nam deleniti. Libero ullam eligendi. Sequi autem corporis. Nisi pariatur est mollitia nisi modi. Adipisci expedita libero temporibus natus. Animi placeat veniam repellat neque aliquam totam laudantium. Iusto minus harum beatae ipsa quo debitis. Sequi tempore eos hic. Facere ut nesciunt autem voluptates adipisci ratione aut. Rem eligendi natus libero odio quibusdam ullam debitis. Rem non quos inventore. Voluptatum id aliquam minus. Nesciunt molestias ut. Fugit doloribus eligendi. Doloribus sapiente quo. Unde a vero quasi perferendis tempore ipsa eum ab. Assumenda quisquam mollitia omnis. Sunt quaerat maxime ullam nobis facere. Facere ducimus cumque esse numquam quo error dignissimos. Dolorum temporibus nostrum sed. Facilis voluptates nihil. Similique placeat ipsam molestiae dolore temporibus nulla. Soluta natus distinctio voluptate.

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