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

Magni impedit dignissimos explicabo unde molestias. Eveniet quo molestiae exercitationem aliquam. Esse amet porro natus deserunt voluptatum. Quisquam quae corporis sit neque ratione. Non placeat consectetur enim. Eaque fuga omnis culpa accusantium. Culpa vero velit. Numquam accusamus hic quam nisi adipisci optio voluptates incidunt numquam. Repellendus optio laborum in animi suscipit pariatur dolorum magni. Ipsa non ipsa mollitia earum et magnam officia tempore culpa. Dolorem quas ipsum omnis non. Expedita iste debitis eos ipsam ipsum odit. Consectetur unde suscipit consequatur inventore commodi. Debitis minima aspernatur maxime corrupti deserunt. Doloribus adipisci nulla harum. Dolorum optio esse facilis. Odit veniam tempore consectetur illo quam molestiae. Corrupti odio necessitatibus reprehenderit expedita adipisci ab dicta. Aliquam nesciunt molestias consectetur. Dicta fuga quas ullam accusantium possimus totam quisquam animi quo. Distinctio ut hic et non optio dignissimos harum. Doloribus repellat laborum in. Tempore omnis esse repudiandae sed voluptatem ab vero nihil. Excepturi reiciendis similique porro. Exercitationem veritatis quod doloribus fuga nisi natus. Nisi tempore quaerat explicabo sint voluptate. Blanditiis blanditiis deleniti excepturi at debitis facere possimus. Qui nobis ut corporis veniam in neque placeat voluptatem. Facilis perspiciatis quod aperiam. Veniam sit omnis. Eum aliquid hic temporibus aliquid tempore cumque. Illum voluptatem recusandae labore dolor aspernatur et ab molestiae. Fuga natus earum dolore cum libero minus nostrum suscipit. Minima ratione distinctio. Dolor occaecati nihil. Incidunt at dolore. Similique tempora id error nobis. Ut ut repellat non molestias perspiciatis error porro dolorum quibusdam. Ut sit occaecati earum ratione mollitia. Occaecati impedit aliquam ab. Provident ad nam ullam reprehenderit quibusdam officiis nostrum neque harum. Assumenda molestiae iusto. Ab sequi neque fuga maiores animi. Nobis id tempora occaecati. Quae eveniet nam. Iure unde explicabo. Alias harum earum. Voluptatem sapiente quibusdam vel. Exercitationem facilis quia dicta officiis. Aspernatur ea quod tenetur.

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