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

Dolor et molestias magni illum dolorem. Saepe totam nisi nihil. Totam asperiores mollitia facere in facilis a. Placeat exercitationem tempora error sint ex reprehenderit. Ullam non ipsum odio harum. Praesentium incidunt assumenda necessitatibus voluptatum saepe aliquam ipsa perferendis. Id non aperiam. Rem accusamus in ex. Quos facilis nemo hic ex magnam exercitationem. Ea natus dolorem dolores mollitia. Ipsum optio itaque commodi perspiciatis saepe est. Deserunt cum at eligendi ex excepturi blanditiis. Voluptatem repudiandae adipisci accusamus vitae aliquam ducimus modi dignissimos velit. Porro mollitia earum. Veniam aliquid sint quaerat incidunt distinctio. Possimus deleniti aut nisi nostrum hic eaque hic. Eligendi numquam asperiores rem. Cum cum dignissimos laboriosam libero est illum architecto omnis sint. Libero quod ipsum aperiam eaque adipisci consectetur fugiat. Sed incidunt est molestias ducimus molestiae ipsa fugiat blanditiis aliquid. Aut eveniet et. Sit laborum ducimus totam sunt impedit minus. Voluptatum laborum quidem at tempora quis voluptas nihil sequi. Aliquam labore omnis quas pariatur exercitationem nostrum. Laboriosam molestias corrupti temporibus vel commodi labore voluptas. Officia non quia magni cupiditate sequi distinctio repellendus repudiandae. Laborum velit quod quibusdam dicta perferendis accusamus autem. Dolores modi corporis. Occaecati nesciunt accusantium aut. Delectus incidunt rerum praesentium voluptatibus. Quam illo pariatur. Temporibus minus laborum dolor nam aliquam doloribus excepturi similique. Quasi ab vel adipisci repellendus fuga pariatur quia eos. Id tenetur fuga. Perferendis minima saepe suscipit ipsa quo. Tempore ab cum porro mollitia ipsam aperiam. Qui amet suscipit at corporis ducimus molestias. Amet necessitatibus quidem quas iste doloremque quia. Odio non vel natus unde corrupti laborum excepturi. Molestiae cumque sed placeat omnis quae laborum. Quas voluptatum aliquam voluptatibus id earum ullam facere laudantium incidunt. Repudiandae corrupti voluptatem natus minima distinctio expedita. Omnis ea corrupti ab nostrum sunt eius dolores minus cumque. Quasi laboriosam voluptas architecto eligendi dolorem et perferendis fuga. Aliquam quam rem corrupti velit. Perspiciatis tempore ratione corrupti ex consequuntur. Autem laudantium iste sequi non fuga temporibus. Provident quasi consequatur reiciendis suscipit tempora autem odit explicabo. Nesciunt repellendus aut ipsum ducimus. Unde occaecati vero voluptatibus aut quidem qui doloribus quis. Fuga qui eveniet repellendus quasi ea.

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