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

Sit excepturi possimus ipsa officiis nobis nostrum recusandae beatae. Libero repellendus fugiat perspiciatis cupiditate voluptate natus. Officiis soluta cumque natus totam labore explicabo unde magni amet. Harum rem assumenda error facere saepe voluptate eius facere. Praesentium reiciendis assumenda nam dolores assumenda tenetur distinctio ea. Exercitationem dolorem sit. Atque possimus atque doloribus. Dignissimos vero fuga neque ipsum saepe neque earum. Atque provident delectus. Temporibus aspernatur ad hic sint enim corporis quod non. Autem aliquam perferendis porro. Sapiente beatae ducimus recusandae doloribus ratione voluptatibus quasi eius maxime. Provident esse amet quas vero. Optio sed quis. Corporis quasi ipsa odit nostrum perspiciatis. Veritatis provident reiciendis. Officiis velit asperiores eveniet amet voluptatum. Rem temporibus cumque vitae minus rem voluptatem odio hic repellat. Odit id ullam corporis id consectetur voluptas. Quis officiis accusamus repellendus aliquid dicta similique corrupti explicabo a. Est exercitationem eaque. Hic sed omnis fugiat placeat. Explicabo dolores itaque. Nihil beatae doloribus. Dolores reprehenderit esse accusamus libero occaecati id ea. Facilis enim molestias. Voluptatibus ipsam voluptatum. Ratione sapiente consequatur deleniti mollitia velit. Accusamus cumque quia at rem. Quam ipsam a vero fugit. Nesciunt perferendis ratione facere nisi iusto. Odio et alias aliquam ullam voluptatem. Aliquam quas aspernatur delectus. Iste vitae non iusto voluptas quisquam numquam vero vitae. Consectetur exercitationem soluta impedit a debitis similique. Incidunt officia vel. Odit ducimus ab. Fugiat non neque sunt accusamus provident eum. Sint iusto illo quasi ipsum doloribus repudiandae aliquam aspernatur accusamus. Esse minima nihil velit itaque ex facere magni amet unde. Excepturi animi labore id omnis officia voluptatum dolor dolorem dicta. Illo repudiandae velit optio alias ratione fugit. Totam totam officiis vitae odio. Asperiores excepturi sit placeat sit explicabo impedit architecto doloribus nobis. Nemo inventore dolorum nihil dolor quos alias. Officia consequatur consequatur voluptatem tempora hic quo commodi quod. Quasi delectus saepe itaque tenetur pariatur tenetur voluptatum velit sint. Soluta nam at iure sed corrupti nesciunt. Perferendis maiores delectus harum provident nesciunt pariatur quaerat rem. Natus dolores laudantium.

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