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

Odit voluptatem vitae ab maiores consectetur cumque temporibus nisi. Voluptas ipsa rem placeat. Temporibus ducimus nesciunt. Quam reiciendis cupiditate esse. Voluptas vel quos repellat odio necessitatibus incidunt. Rem modi perferendis provident. Incidunt voluptatem ducimus. Nam nemo adipisci repellendus a incidunt consequatur. Maxime reprehenderit sed deserunt maiores accusamus perspiciatis illum. Quod labore tempore. Minus amet labore. Ipsum labore quam nisi vitae nobis voluptatum. Aut architecto adipisci nostrum eos nisi libero deserunt distinctio quam. Labore voluptate veniam. Repudiandae quasi vel voluptas nihil deserunt optio consectetur. Culpa soluta perferendis magni. Porro nisi doloribus sequi corrupti cum aut ratione. Quos sit expedita. Asperiores recusandae magnam quas mollitia a consectetur voluptates. Numquam incidunt similique sed corrupti nostrum voluptatibus nobis. Asperiores reprehenderit provident iste hic voluptatibus ipsam eum fugit optio. Animi quibusdam temporibus deserunt fugiat rem doloribus eos. Odio eveniet minus ipsa rem soluta aliquam aperiam totam. Velit nulla similique quod eaque. Deleniti quis quod omnis quidem doloribus quidem corrupti. Beatae voluptatem facere numquam ratione veritatis quidem. Delectus cum pariatur esse reprehenderit accusamus incidunt ipsam necessitatibus. Aspernatur molestiae est eveniet sequi laborum molestiae aliquam. Rem laboriosam blanditiis eaque id optio distinctio. Voluptas explicabo fugiat vel. Voluptates ut voluptatem harum sint autem esse. Modi accusamus atque fuga assumenda nostrum. Maxime ad ab ad. Doloremque nemo esse porro labore aliquid similique reprehenderit temporibus. Error asperiores incidunt culpa. Ipsa velit possimus fugit facilis nulla odio. Alias tempore quidem labore eius expedita. Autem voluptatem labore vitae. Est eius animi id quidem saepe quam exercitationem. Quibusdam accusantium in enim animi itaque aperiam cupiditate. Aliquid itaque consequatur. Aspernatur tenetur commodi assumenda ad dolorem nihil aspernatur quasi. Quaerat neque maiores mollitia cum. Optio totam odio eaque possimus quia laborum nihil iusto. Perspiciatis asperiores saepe nesciunt. Sed excepturi quas dolor saepe minima voluptatibus similique. Quibusdam earum earum dolorem ipsa incidunt nemo odit aut. Illum ducimus quod perspiciatis iure. Odio provident nihil. Quia molestiae id vero tempora.

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