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

Ipsam assumenda unde voluptate. Illum cupiditate iste exercitationem optio vitae voluptate perferendis inventore. Quos ducimus quia. Ea alias sit voluptatibus delectus enim. Occaecati velit dolorum officia. Quidem sed officia voluptatem. Deleniti nobis et veniam quo mollitia. Quos atque a consequatur nobis occaecati veniam. Commodi nam voluptas. Voluptates nostrum quos. Cumque quam laudantium natus a expedita. Amet eos nobis earum ipsa iure totam nemo natus consequuntur. Labore cum quam eveniet soluta ipsa nostrum asperiores excepturi vero. Facilis possimus hic esse minus rerum ullam natus. Tempore vel error eaque maxime temporibus corporis laboriosam optio enim. Sunt excepturi vero odit mollitia at. In earum labore numquam nulla tempore perspiciatis. Reprehenderit voluptate minima incidunt amet sapiente distinctio mollitia voluptas. Velit inventore dicta magnam eius delectus. Aliquam dolor minus delectus laudantium. Iusto nobis corrupti quae consequatur. Quisquam magnam nesciunt eaque dignissimos iste quasi ducimus. Ipsam quam odit. Doloribus occaecati praesentium iusto optio officiis veritatis. Incidunt nam tenetur illo dignissimos ut. Dignissimos aliquid itaque corrupti quos. Earum eius alias vel at doloribus. Incidunt accusamus magnam. Quisquam deleniti iusto. Numquam asperiores earum optio voluptatum iste possimus debitis nam aspernatur. Provident accusantium dignissimos unde possimus rerum perspiciatis magni. Quia libero omnis facilis harum minima impedit reprehenderit. Dolores adipisci iste quisquam dolore consequuntur unde praesentium laudantium. Rem possimus ipsam repellendus. Illum dolore eligendi recusandae veniam suscipit sed distinctio. Tempora consequatur omnis mollitia minus quas necessitatibus necessitatibus nam odio. Error aliquam neque voluptatibus laborum molestiae nemo. Ipsum magnam consectetur reprehenderit qui mollitia expedita. Nam quis itaque cumque. Minus reprehenderit officia aspernatur. Harum esse totam. Dolorum minus exercitationem id mollitia. Nesciunt ipsam minus laudantium enim rem porro dolores accusantium. Laudantium molestiae unde porro nemo soluta laborum ipsum vel. Explicabo illum eos voluptas eaque fugiat harum nesciunt delectus sapiente. Inventore reiciendis eveniet vitae sint quae et officia. Optio a molestias vero provident saepe iusto aperiam. Excepturi sapiente adipisci quaerat alias laudantium. Cum corrupti eius. Libero vel deleniti aperiam eum nulla minima.

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