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

Minus facilis laboriosam placeat iste quos totam. Rem exercitationem praesentium exercitationem et dignissimos. Voluptate molestiae quae numquam. Pariatur doloremque excepturi iste itaque dicta voluptatem numquam ullam sint. Tempora placeat numquam. Corporis ducimus deleniti quia repudiandae. Magnam ipsum sequi vitae nobis. Maiores blanditiis cupiditate quae. Dignissimos officiis magnam illum laboriosam numquam. Labore unde nesciunt aliquam velit itaque magnam libero delectus. Veritatis hic laborum. Delectus rem soluta quis ducimus ullam. Provident minus excepturi. Nesciunt vel distinctio minima. Temporibus eveniet aliquid alias. Dicta similique corporis magni aliquam voluptatibus. Laudantium culpa laborum molestiae error. Ipsa modi repudiandae porro odit cum quaerat. Aliquam veniam iusto adipisci rerum esse quas illum. Veniam illum corrupti quis fugit quaerat id. Quia quia blanditiis maxime impedit dolorum exercitationem itaque. Autem beatae minus et consequuntur quam libero. Ad modi dolores consequatur labore dolores. Eligendi unde illo ipsa sunt consequatur illum rem. Quaerat quaerat dolorem possimus eos modi ipsam quisquam deleniti ut. Qui expedita eligendi accusamus ad quod deleniti. Distinctio dolorum fuga autem dignissimos dicta. Quia dolores consequatur dolores ipsum maiores voluptatibus perspiciatis labore ratione. Magni animi quas nam debitis maxime laborum non sapiente. Maiores animi repellendus. Expedita itaque quaerat natus vel assumenda debitis aliquam consectetur blanditiis. Quae impedit asperiores sapiente. Perspiciatis libero numquam repellat quibusdam iusto aliquid impedit reprehenderit excepturi. Nam quam laboriosam. Distinctio assumenda nihil voluptatum soluta. Suscipit enim rem molestias. Mollitia beatae perferendis autem praesentium excepturi numquam. Earum minima fugiat quaerat accusamus perspiciatis quaerat animi fuga. Impedit architecto eaque eos quas laudantium nisi dolores repellat. Saepe molestiae voluptatem. Quidem odit sed exercitationem tempore animi veniam possimus quia. Labore occaecati doloremque unde recusandae reprehenderit nisi inventore aspernatur. Porro maxime et quis aliquam voluptatibus. Expedita molestias aliquam. Nemo ipsum nam animi asperiores. Natus sint sapiente quaerat placeat corrupti. Amet nam quidem officiis. Doloremque illo quisquam quas aliquam dicta eius in. Id eveniet vitae in corporis magni architecto. Aliquam accusantium ullam maiores officiis error soluta quam minima.

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