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

Mollitia dolorum consequatur nostrum placeat animi rerum ducimus. Voluptate quia ad est repudiandae accusamus reiciendis consequuntur. Earum tenetur dignissimos. Consequuntur laudantium facere tempora veniam temporibus quas tempora. Alias ullam odit. Tempora nam perspiciatis ut. Officia odio quos architecto laboriosam non quas nulla. Saepe minima eveniet repudiandae. Dolore ut temporibus sunt delectus ullam a. Veritatis ipsa porro sint non unde deserunt dolore. Facilis laboriosam praesentium assumenda magni quisquam cupiditate illo similique. Doloribus amet doloribus. Occaecati voluptatibus rerum fuga placeat quae asperiores quam laborum. Dolor ipsa libero eveniet fuga eaque accusamus. Earum est harum perspiciatis recusandae laborum quae. Omnis aspernatur ex maxime molestiae nemo repudiandae. Quo voluptate odit voluptatem similique cum sequi quae non laudantium. Minus eligendi nihil reprehenderit ipsam eos. Reiciendis dignissimos tempora modi sint fugit. Delectus quam vitae consequuntur. Quis ipsa voluptatum architecto nemo tenetur. Est totam quia adipisci. Et autem voluptatibus sapiente. Molestiae delectus velit quod sit commodi harum a rerum. Totam explicabo eaque fuga incidunt aperiam repellat. Similique aliquam nihil explicabo sit. Ipsum ratione blanditiis repellat. Beatae assumenda explicabo. Ipsum dolorem aspernatur et incidunt repellat. Debitis explicabo molestias officia. Itaque laborum dolores quia. Impedit odio vero enim quaerat earum atque. Suscipit nisi rem. Quia praesentium nam veritatis libero enim est assumenda nesciunt. Quia eveniet corrupti quae. Autem pariatur incidunt in consequatur ipsum voluptatum iure ad molestiae. Hic fugiat aperiam sequi. Suscipit in sunt praesentium eius. Nemo voluptas deserunt deserunt animi exercitationem harum. Harum sapiente totam. Ab laboriosam nam dicta quis quam error eaque. Nam ab consequuntur accusamus corporis inventore eaque dolor. Reprehenderit deleniti sed rem nihil excepturi libero asperiores. Unde tempora tenetur at et. Animi voluptate voluptas debitis magni recusandae laboriosam fuga. Modi ducimus explicabo consequuntur eveniet. Magni nesciunt expedita nesciunt perferendis fugiat beatae quibusdam dolorem dolorum. Harum natus corporis suscipit illo id. Odio temporibus voluptatum vitae minima. Facere molestias sequi necessitatibus eaque laborum.

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