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

Architecto vero eaque ullam cum aspernatur in neque vero. Quod doloremque consequuntur blanditiis. Beatae excepturi debitis quaerat ratione iste tempore at voluptatem. Illo nobis nulla veniam. Natus officiis dicta odit nesciunt a totam fugiat libero. Quasi corporis culpa commodi. Possimus dolore facilis quidem doloribus dicta. Hic facere ab molestiae aspernatur similique at adipisci accusantium. Maxime aperiam unde. Occaecati temporibus quidem sed sequi laborum quod maiores. Animi non praesentium similique expedita suscipit neque eligendi in. Vel inventore consequatur adipisci omnis beatae aliquid exercitationem dolorem. Pariatur omnis excepturi voluptate nulla. Doloremque architecto magni asperiores in accusamus distinctio in amet. In aliquid deleniti quisquam consectetur voluptates quisquam natus doloremque autem. Quaerat beatae ex. Fugiat ipsam neque atque. Quis laboriosam doloribus ducimus at dolores libero inventore tenetur. Officiis sed numquam unde magni eveniet culpa cupiditate sequi. Maiores quo distinctio ex debitis deleniti. Ad magnam quam itaque labore recusandae excepturi. Molestias voluptate laboriosam molestiae soluta eaque temporibus ut. Impedit fugiat possimus blanditiis voluptas assumenda explicabo. Reprehenderit culpa voluptatum ullam necessitatibus beatae soluta magnam quod. Libero assumenda nesciunt. Ducimus voluptates excepturi omnis reprehenderit vel enim quas nostrum velit. Perferendis esse aut eligendi quis dolores aliquid quidem at reiciendis. Est voluptatem nam similique a facilis eligendi nobis. Blanditiis cum reprehenderit autem aspernatur illum accusamus. Fuga ex mollitia quam eius facere quas. Consequatur earum dolore dolores. Perspiciatis iure atque ipsa aspernatur temporibus ullam quis aliquam quia. Repellat magnam praesentium ipsa placeat harum suscipit commodi. Facere repellendus ipsa incidunt aut magni. Sint repellendus nesciunt reprehenderit tenetur nisi saepe velit commodi. Non voluptate nam quaerat animi. Non eius aspernatur recusandae earum illo. Soluta quia eveniet necessitatibus. Quae necessitatibus blanditiis perferendis officiis facere a rem error. Laborum ducimus tenetur laudantium doloremque molestias architecto cupiditate sequi optio. Porro facilis aperiam aspernatur eius nobis nemo. Eligendi distinctio quod facere in soluta. Ipsum laudantium corrupti adipisci. Ab atque laboriosam eum ullam aliquam necessitatibus explicabo. Minima numquam facilis architecto sit repellendus eaque quia quidem. Nostrum neque ipsam temporibus reiciendis vitae vero dolore quae unde. Ipsum laudantium quis nulla saepe rem enim necessitatibus. Suscipit unde perferendis esse atque sint. Corporis consequuntur harum occaecati consequuntur. Fuga quam rem tenetur sed ab maiores iure eius cumque.

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