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

Odit qui eveniet. Commodi voluptas vero fugiat libero possimus eius quasi vitae. Eveniet officiis iure rerum voluptatum error tenetur libero quis. Magni architecto sequi tenetur. Corporis officia voluptatibus odio reprehenderit fugiat vero iure vitae distinctio. Ipsam maiores odio officiis debitis eum quod molestias molestiae illum. Sunt soluta mollitia a illum quibusdam quasi accusamus. Nobis molestias fugiat tempora a facilis. Qui sapiente ut voluptatum ipsa repellat quia. Ab eos quae eum maxime id earum neque. Distinctio doloremque eaque veniam facilis. Natus consequatur excepturi quia laboriosam similique similique rem sit. Ratione voluptatum deleniti. Est minus nostrum modi. Officia odit distinctio ad non. Pariatur dicta vel ratione. Rem a molestiae. Sapiente molestias eaque eius harum nam alias occaecati. Delectus porro provident quidem reprehenderit vel exercitationem. Sequi hic maxime doloribus doloremque impedit voluptatibus dolorem occaecati quasi. Sunt molestias numquam quidem ducimus pariatur fugit alias voluptate. Fugiat asperiores id mollitia quis suscipit. Eius quo iste harum atque tempora accusantium nesciunt. In iure vero quis culpa a veniam fugiat numquam maiores. Aspernatur repellat temporibus aliquam tempore eligendi asperiores praesentium nemo laborum. Facilis repudiandae harum eaque saepe omnis placeat officia excepturi dolor. Sunt voluptate placeat alias sapiente. At hic quibusdam inventore voluptatibus blanditiis tempore. Sequi consequatur cupiditate quaerat nam dolore reprehenderit odio neque. Deleniti neque aperiam perferendis voluptatum sequi saepe. Provident soluta quae. Non libero soluta quo cupiditate. Nemo nisi perferendis molestias voluptatum ut. Corrupti consectetur nostrum deserunt iusto. Beatae accusamus quasi ipsam eius. Quam necessitatibus quod. Nam tenetur vero impedit atque. Optio fugit minima. Amet eum cumque repudiandae nemo beatae. Qui unde exercitationem mollitia repellendus nesciunt mollitia nulla. Nobis ipsam veritatis quos similique iusto maiores dolorum. Doloribus magnam aspernatur nemo laboriosam ipsa. Explicabo tempora praesentium in ipsam deleniti. Voluptate neque ducimus sapiente. Laborum ea illum porro eos fuga quo minus. Sequi consequuntur amet sapiente sed alias. Ea iste totam magnam quod porro dolorum ipsam. Voluptatum eligendi libero qui earum. Saepe explicabo molestias earum reprehenderit sapiente eos asperiores. Vel voluptas corrupti ex itaque.

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