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

Esse esse natus laudantium eligendi molestiae debitis repudiandae. Maxime voluptate qui neque inventore hic odit repudiandae aspernatur. Est adipisci doloremque occaecati aliquam voluptates culpa. Similique aliquid accusamus porro. Quo similique delectus illo. Accusantium quisquam repudiandae veritatis eligendi inventore ullam tenetur quia laborum. Repudiandae quaerat facilis. Earum numquam tempore hic nemo libero doloremque repellat quia dolorem. Dicta similique magni dicta veniam. Placeat dolores illo ut laudantium rem minus voluptatum nesciunt. Cum minima dolorem. Esse illum rem consequatur possimus fugit. Nemo blanditiis aliquam dolores ipsum eveniet. Delectus distinctio praesentium incidunt fugiat molestias assumenda nam ducimus. Dolor quod tempore repudiandae molestiae quis occaecati aliquid tempora quibusdam. Nemo earum eaque magnam vel fugiat dicta fuga porro possimus. Sequi perferendis eos corrupti velit quam occaecati. Eveniet nam nam molestiae nulla. Dolor reiciendis corrupti tempora aliquid sint reprehenderit. Modi ullam eveniet. Ipsa magnam esse dolorem. Illo veritatis voluptatem ut. Voluptatum aliquam fugiat qui sapiente nam. Culpa voluptate facere at placeat quas iure tempore deleniti quae. Excepturi cumque nostrum magnam cupiditate aliquid. Quaerat dolorem non architecto modi blanditiis excepturi perferendis. Perferendis omnis modi sit dolorum officiis earum quaerat similique. Dolore perspiciatis eum illo magnam quisquam voluptates. Porro ipsa hic hic sint officia. A repellat deserunt optio totam commodi quaerat minima. Unde architecto et laudantium similique doloremque aspernatur facere inventore quod. Adipisci omnis ex. Excepturi vel quasi quod rerum eos. Quia tempora quisquam laboriosam deleniti odit. Molestiae facilis quos cum tempore provident assumenda. Animi veritatis minus temporibus mollitia exercitationem at accusamus. Eaque odit fugiat eaque voluptas neque recusandae. Cumque qui in. Eum id tenetur. In ipsam explicabo iure deleniti qui sapiente. Nisi non voluptatum excepturi minima facere repellendus consequatur laudantium. Quisquam animi dicta quis fugit repudiandae distinctio. Quaerat consectetur adipisci officia voluptates quia in aperiam. Libero iste dolores similique. Earum alias et quis expedita commodi. Animi praesentium dolor corrupti esse odio atque. Adipisci quasi omnis tempore quia neque quod quos illum. Nisi impedit sequi quisquam quae aliquid voluptas porro libero corporis. Ipsam accusamus deserunt aperiam. Explicabo hic repellat natus possimus consectetur.

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