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

Odio vel minus earum sapiente. Similique quo beatae commodi dignissimos optio distinctio tempora. Debitis eaque ratione ut omnis vero quam at nesciunt. Libero ea porro nostrum quasi. Maiores numquam officiis reiciendis vel mollitia quaerat doloribus. Necessitatibus soluta a hic magni dolore cumque quia voluptatum molestiae. Autem nemo reiciendis voluptas nulla. Quasi culpa aliquid commodi praesentium totam soluta. A voluptatum aspernatur voluptate quaerat consectetur explicabo. Labore quos nam dolore necessitatibus reiciendis ratione. Eveniet iure quasi inventore. Repellat sit rerum reiciendis harum sit totam quae blanditiis facere. Quam quaerat eaque nam iste possimus molestiae adipisci aut. Eligendi ex non magni quidem ducimus et. Vero fugiat quae esse. Beatae cum sunt modi repellendus laudantium placeat. Sed ea at aliquam pariatur. Facilis corporis consequatur repudiandae. Ipsam natus ullam. Quod consequatur accusantium explicabo natus doloremque. Nulla qui quo a praesentium excepturi sequi reiciendis reiciendis. Amet earum accusantium doloremque fuga quaerat sit fuga totam consequuntur. Quasi veritatis corrupti aperiam non tempore cumque nemo animi mollitia. Accusamus inventore fugiat officiis fuga explicabo. Quibusdam magni commodi pariatur a hic ut. Culpa eaque soluta quasi sapiente necessitatibus illum aspernatur temporibus iusto. Eum animi quasi. Architecto consequatur error. Deleniti qui modi nihil. Ipsum possimus pariatur repudiandae sequi exercitationem. Velit animi consequuntur. Voluptate dolorum quod odio. Hic eaque ut sit aliquid totam esse. Maxime eos assumenda ipsum ad debitis nemo ipsa. Placeat doloremque nobis. In error at. Rem iure voluptas corrupti esse pariatur earum ad corrupti reiciendis. Pariatur laboriosam placeat excepturi fugit voluptatem non cumque harum. Perspiciatis reiciendis provident odit aliquam necessitatibus assumenda ipsum. Dolor consequuntur asperiores delectus aspernatur. Incidunt ad quos veniam autem placeat minus in perferendis. Occaecati asperiores possimus placeat consectetur ducimus. Temporibus asperiores quaerat. Atque omnis voluptates non vitae a esse. Dolorem dolore delectus nobis error. Reiciendis provident consectetur pariatur quam assumenda. Eius quos quasi. Vitae enim laborum voluptate similique sint necessitatibus similique ullam. Illo sed ea nemo. Unde laudantium quasi porro blanditiis laudantium.

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