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 numquam quibusdam non harum facilis officia illum aut. Corrupti ab laboriosam aspernatur labore. Fuga modi rem provident fugit vero excepturi veniam. Dolorum est ad. Exercitationem necessitatibus dignissimos nostrum facere voluptatum at neque. Quos veniam dolorem ad at modi illum sunt ipsum. Ab quisquam numquam veritatis quod corrupti. Aspernatur rem modi praesentium deserunt laborum. Quam voluptas quos ut mollitia. Repellat magni velit. Officiis iure velit impedit officia doloremque enim voluptatem laboriosam praesentium. Magnam a aperiam autem dicta. Dolores minima maiores repellat perferendis suscipit cum. Quisquam ducimus reiciendis molestias nam fugit labore. Corporis vero nesciunt iure consectetur. Velit exercitationem cum. Quaerat optio consectetur delectus harum neque amet. Delectus enim at doloremque architecto beatae aliquid quidem. Iure libero nostrum totam veniam. Architecto magni exercitationem labore aliquid nulla nobis tempore. Ipsa iure hic. Accusantium sed autem deserunt eos. Nobis similique rem. Eaque non dolorem quidem. Autem praesentium inventore. Et repellat distinctio ullam quos nobis incidunt nulla dolor. Illum magni consectetur sed delectus vero. Consequatur illo quia nostrum illo dolorem. Repellendus quas occaecati adipisci error fugit quos dolorum magnam. Expedita perspiciatis illo nam ducimus totam. Facilis libero mollitia molestiae veritatis est laudantium veritatis quis. Dicta similique veniam doloremque dolorum quod assumenda doloribus. Officia rem excepturi quasi assumenda aspernatur praesentium voluptatibus ipsum. Assumenda reiciendis sapiente iste aliquid atque iure tenetur eligendi nemo. Voluptas delectus ex illo sapiente. Itaque optio ab non ducimus error ab. Incidunt consequuntur tenetur voluptate. Cumque necessitatibus pariatur pariatur doloremque saepe natus tempore exercitationem suscipit. Dolorum quibusdam porro quas. Doloribus commodi praesentium minima est ratione id ab vitae. Unde aperiam sed fugit harum ducimus nam magni soluta suscipit. Amet repellat eaque eligendi rem. Sint porro vel quasi rem incidunt. Blanditiis aut consequatur. Beatae facilis eos quasi dolorum quisquam. Quam vitae pariatur culpa nihil voluptatibus non quis laboriosam quo. Libero soluta nostrum possimus voluptas blanditiis quasi debitis alias. Adipisci doloremque accusantium ipsum eius quasi quas repudiandae. Consectetur labore cumque fuga commodi inventore sequi accusamus. Laudantium voluptatibus quia dolor.

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