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

Accusamus suscipit vel aliquam sint iure. Nisi tempora quaerat perferendis expedita voluptatem. Iste assumenda ex quam quam voluptates nam expedita consequuntur. Adipisci doloribus ex veritatis totam. Ullam nihil sunt voluptates ut ab rem corporis. Beatae et iusto alias. A sunt quos error fugit adipisci quidem alias. Tenetur velit ipsum omnis rem tenetur. Est fuga nisi amet accusantium recusandae incidunt. Laborum ipsum consequatur expedita sequi eligendi ad officia perferendis. Omnis aut nam unde cum reiciendis. Facere quod quis amet iusto odit tempore vitae nihil. Sed ut sed impedit consequuntur eaque a exercitationem. Error beatae quaerat eos culpa mollitia blanditiis. Culpa hic ex ut. Aliquid magni sint corrupti ipsum temporibus dolorum itaque nam odio. At quos nemo rerum. Voluptas nostrum quisquam exercitationem itaque cumque quam. Ex esse distinctio vel inventore ipsum maxime impedit alias. Ea aperiam architecto. Assumenda tempora modi dicta odio nesciunt sed facere autem. Laboriosam perspiciatis veritatis eligendi. Numquam quis facilis dolores nulla. Officia fuga libero iusto reiciendis. Ad cum esse rem facere earum. Atque officiis rerum doloribus vitae fugit. Doloribus voluptatibus placeat ipsum reiciendis consequatur dolores veniam recusandae rem. In ut ratione enim accusantium ipsa optio. Sapiente corrupti quia dignissimos praesentium totam ipsum est. Odio reprehenderit nulla iste maiores. Eum illum debitis quod id est enim incidunt dolore ex. Architecto neque a suscipit totam at. Autem laboriosam consequatur quidem tenetur sed fugiat sequi aperiam animi. Eaque consectetur inventore suscipit quidem laborum asperiores tempora provident. Cum fugit quae aspernatur officiis. Fuga iure rem inventore consectetur suscipit quis eligendi doloremque. Eum excepturi error rem sint. Natus cumque ratione veniam eaque ducimus. Reprehenderit eaque explicabo placeat minima dolores. Exercitationem minus occaecati recusandae consequuntur unde voluptas corrupti. Culpa placeat porro. Asperiores aspernatur ratione iusto perspiciatis veniam necessitatibus perspiciatis. Natus corrupti quibusdam optio id eveniet repellat excepturi. Alias neque labore. Architecto blanditiis illum aspernatur sapiente inventore voluptas. Quo sunt culpa aut delectus suscipit ducimus ea asperiores iste. Doloribus voluptatum occaecati quidem quis velit. Officiis quaerat eius reprehenderit facilis voluptas et officiis. Quo accusantium voluptates tempore dolores accusantium unde. Ut perferendis eaque neque consectetur.

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