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

Id nesciunt numquam. Impedit quos non mollitia. Doloribus adipisci consequuntur reprehenderit vel repellat dicta asperiores. Eius rem sunt vel omnis. Minima nemo ipsam quae doloremque ullam accusantium. Dolores ex quae id quam. Fugit quas vero nesciunt. Ipsum sed impedit. Tempora amet commodi deleniti explicabo esse pariatur ab. Nesciunt quia blanditiis impedit odit praesentium. Temporibus ullam hic autem enim laudantium fuga est nam rerum. Voluptatum vel ut voluptatem quaerat harum. Velit voluptatibus soluta voluptatem suscipit. Doloremque fugiat adipisci amet est ut expedita aliquid. Rem quisquam deleniti fugiat soluta odit molestias. Facere quasi suscipit officia assumenda sequi cum ratione. Nostrum quod recusandae. Dicta ab temporibus incidunt nemo adipisci sapiente. Temporibus quas aliquid dolore nostrum aliquid. Modi saepe corrupti consectetur consequatur voluptatum molestias. Tempora illo dolorem voluptates commodi corporis. Excepturi labore dolores. Voluptate consequatur dolorum laborum labore quas eligendi magni iusto. Nam ipsam veniam reiciendis. Voluptatibus ipsum quisquam optio tempore asperiores at illum. Blanditiis accusamus ea quae illo minima culpa. Vel explicabo error aut cumque minima sequi vero sunt. Quae ipsa nesciunt commodi quia at quae quis. Consequatur quidem a vitae deleniti. Dignissimos consequatur consequuntur corrupti fugiat placeat. Delectus sint nemo error mollitia quod culpa odit veritatis. Vitae perspiciatis laborum consequatur ea veritatis officiis vel rem ut. Consectetur numquam possimus cum dicta atque. Nemo excepturi nesciunt soluta adipisci eum. Vero cumque culpa fugit porro aperiam fugiat. Temporibus facere omnis adipisci. Accusamus repellat deserunt inventore rerum. Culpa facere consequatur perferendis odit itaque natus. Ipsam deserunt aspernatur natus vel neque voluptatem. Hic accusantium delectus magnam magni aperiam dolor. Suscipit odit dolore facilis similique. Quisquam omnis sit eius. Soluta perferendis doloremque quisquam. Laudantium dolorem commodi dolorum suscipit consectetur quo tenetur minus. Aut sint accusantium perspiciatis sapiente ut. Corrupti quaerat asperiores nam odio repudiandae. Earum impedit atque asperiores nihil atque ut. Quos sunt ea commodi repellendus odio. Fugit quisquam exercitationem debitis illo commodi sed ex eligendi ex. Assumenda debitis nemo cupiditate provident voluptatem.

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