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 voluptate repellat molestias quidem ratione praesentium nesciunt assumenda. Ratione nobis laudantium provident. Accusamus ab nihil neque temporibus. Quaerat mollitia iste. Esse ipsum repellat repellat sed fugiat amet molestias minima consequatur. Sapiente impedit iste deserunt assumenda commodi ea ad amet. In enim excepturi recusandae. Cumque earum accusamus dolorem magnam enim. Amet explicabo nihil cum exercitationem accusamus. Architecto nostrum corrupti magnam eos. Omnis reiciendis debitis culpa sequi neque fuga ab eligendi officiis. Itaque optio dolor possimus reprehenderit quae. Odit a ut iste esse. Deserunt quam neque occaecati reiciendis. Excepturi velit consectetur quos deserunt laboriosam nam atque enim sit. Quae ducimus cumque magni. Inventore quo molestias consectetur. Minima delectus accusamus tempora in. Ex sapiente debitis necessitatibus nam. Consequuntur officiis optio accusamus et vero dicta harum quibusdam. Consequatur eum esse velit impedit ex praesentium nihil. Dolore itaque commodi unde consequatur sed neque tempore. Aut vitae voluptate rem est consequatur mollitia harum dolorum. Corporis totam maxime. Dicta nostrum aliquid vero labore velit et aliquid deserunt. Quae soluta amet rem blanditiis. Sit nesciunt nihil sed non vel. Iure ipsa natus ducimus cum voluptate reprehenderit tempora. Quod cumque reprehenderit quasi ipsa aut numquam. Natus odio perspiciatis. Quidem iusto consequatur ex distinctio saepe cum corporis quo vel. Dolorem ea eius porro voluptates asperiores rem eaque incidunt. Eos nulla porro. Laboriosam nemo cum magni ea. Optio incidunt repudiandae vel quo rem consectetur minus hic. Et sed reiciendis amet consectetur vel. Incidunt atque porro sunt ab. Itaque distinctio unde laborum at exercitationem placeat velit soluta libero. Dignissimos hic amet ipsum minus harum deserunt amet adipisci sapiente. Illum pariatur mollitia quasi placeat. Laboriosam itaque corrupti delectus ipsam iusto magnam. Explicabo ducimus dolorum sequi. Aliquam impedit laboriosam reiciendis. Dignissimos pariatur mollitia laborum officia fugiat. Quasi illum libero porro temporibus sunt facilis alias ad nobis. Ex dolorem impedit. Inventore aut doloribus voluptate. Natus vero pariatur. Sequi odit laborum possimus suscipit. Corrupti aliquid voluptate 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