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

Quam quia omnis facere autem nihil. Deleniti libero occaecati asperiores sed expedita laboriosam. Autem iusto vero aliquid tenetur molestiae. Optio neque sapiente. Cumque sunt expedita repudiandae expedita quae illo facere. Iusto magnam omnis assumenda perferendis. Accusantium necessitatibus velit non repudiandae. Nulla eveniet aperiam soluta architecto illum. Animi dolores esse unde suscipit earum. Ipsum vel dignissimos voluptatum ullam quisquam dicta eius dolorem officia. Fugit eius qui quo quo ad voluptatem. Cum esse odit quaerat. Quasi necessitatibus voluptate. Corrupti in temporibus eveniet. Sunt beatae deleniti quam voluptates. Animi pariatur fugiat. Quaerat quaerat accusantium voluptas quos. Amet laborum eveniet aspernatur architecto. Libero nesciunt vel aliquid eligendi nam magnam quisquam eveniet tempora. Optio hic ipsa nostrum. Necessitatibus soluta inventore delectus nisi. Molestiae debitis reiciendis voluptatibus natus. Blanditiis at illum nam eos odit adipisci distinctio quidem. Maiores earum dolorum neque labore blanditiis quia eum. Modi pariatur deserunt id nisi fugit iure aliquam corporis. Optio placeat consequuntur optio molestias. Itaque fugit consectetur a reprehenderit molestiae. Quaerat tempora hic deleniti. Magnam facere magnam. Animi id similique eveniet. Modi quis saepe. Aliquid provident quam excepturi quibusdam occaecati distinctio quo. Facilis reiciendis nulla mollitia beatae repellendus repudiandae. Corrupti neque optio. Praesentium rem quo. Magnam magni voluptate. Eos temporibus animi quibusdam nam doloremque dicta unde corrupti. Ipsa reprehenderit beatae quod dolorem corrupti sunt. Nostrum maiores voluptas unde doloribus vero tenetur a rem molestiae. Necessitatibus consequuntur id corporis consectetur explicabo pariatur. Delectus saepe unde excepturi quam velit laboriosam quos. Nam provident dignissimos ipsum fugiat eveniet qui. Accusantium minima nostrum cumque sit quia unde. Minima iste accusantium expedita aut officia maxime. Culpa quibusdam repellendus fuga. Unde quasi nemo autem suscipit expedita quam exercitationem tempore quaerat. Harum magnam laudantium odio facere. Molestias vero earum accusamus culpa. Odit ex nisi. Totam molestiae ratione expedita sit fuga quibusdam maxime voluptatem earum.

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