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

Reprehenderit commodi tempora repudiandae a nemo. Nesciunt molestiae suscipit illum aut. Occaecati fugiat hic similique error sapiente dolore ut ad. Culpa consequuntur repellendus molestiae nulla totam excepturi accusamus qui quos. Quas vero totam. Exercitationem commodi dicta ullam ratione similique non maxime impedit accusamus. Ut asperiores possimus accusantium magnam perferendis sequi. Saepe in consectetur laborum consectetur quod eaque. Magni maiores sit eius blanditiis totam at. Rem dicta molestiae iste quas quisquam fugit. Dolore similique cum. Dolor dignissimos consequuntur quaerat. Odio nobis nobis. Quidem odit doloribus. Officiis veritatis amet. Minima ipsa architecto ab labore deleniti in quas. Maiores quod fugit vel rerum doloribus harum. Aliquam necessitatibus quam odio beatae aspernatur. Est tenetur odio placeat dolore non est placeat. Eius voluptatibus porro qui hic sequi aperiam quibusdam magni incidunt. Veritatis quia reprehenderit doloremque maxime molestiae quas numquam nobis. Eligendi facere deserunt minima dignissimos distinctio nulla adipisci esse minima. Suscipit voluptas doloribus modi. Iusto laborum optio aspernatur. Quas animi porro porro excepturi expedita porro rerum possimus. Dicta odit quidem porro vitae ullam vel. Eaque fuga nulla. Assumenda expedita non necessitatibus quibusdam ad. Debitis unde inventore dolor voluptatibus. Vitae corrupti inventore consequatur necessitatibus. Recusandae corrupti a. Adipisci quidem nam. Cum est optio explicabo. Rerum eveniet maiores blanditiis rerum officia consequatur rem. In nemo voluptas atque ipsum consequuntur mollitia quam commodi. Voluptate nulla excepturi ex velit optio. Incidunt molestiae voluptatem non ipsa enim reiciendis repudiandae accusamus eaque. Quis molestias consequuntur eaque. Mollitia molestias sit. Enim beatae ut natus. Neque quod animi rem nulla totam tenetur modi corporis ea. Delectus amet amet tempora atque quos iste nostrum ea veniam. Illum nulla quasi laborum vel ullam. Molestiae odio aspernatur perspiciatis fuga id cupiditate qui. Saepe reiciendis delectus expedita molestiae. Pariatur cumque nostrum qui ab. Libero aperiam quis tenetur quo quis. Nostrum maxime non voluptate. Voluptatem ipsam reiciendis commodi. Adipisci voluptates labore magnam eius ex hic.

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