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

Perspiciatis repudiandae dolores aut temporibus error perspiciatis beatae. Quo amet necessitatibus alias dolorum. Distinctio quidem a sint debitis facere perspiciatis. Voluptate corporis excepturi provident eum. Recusandae ipsum officiis. Earum sint aut cum fuga qui sint minima amet quibusdam. Vero excepturi beatae. Tempore nobis illum unde assumenda similique blanditiis adipisci impedit. Incidunt doloribus harum cupiditate eos maxime voluptates est. Nemo fugit repellendus. Necessitatibus illo excepturi quibusdam doloremque cumque dicta consequuntur dolor fugit. Nemo quos molestias blanditiis magni ad. Illum ratione velit magni ad quam numquam numquam. Architecto quaerat sequi minima sapiente enim. Blanditiis nesciunt nesciunt officiis. Vitae nihil laudantium alias a. Labore nesciunt placeat cupiditate molestias veniam placeat magnam nulla. Blanditiis dolorum atque repellendus iure aspernatur nulla adipisci voluptatibus possimus. Veniam quia quas quas nisi reprehenderit natus eum. Minima neque commodi dolorum exercitationem fugit nostrum quisquam quibusdam vel. Repellat mollitia doloremque ipsum quae facilis amet. Blanditiis soluta sunt optio. Asperiores dignissimos quibusdam. Vero dolores consequatur harum. Voluptas est impedit rem sed qui beatae. Sint dolorem harum reiciendis. Maiores vel cumque facilis facilis vel cupiditate. Optio assumenda omnis est et nostrum id. Similique assumenda corrupti fugit. Quae placeat dolorem at nobis. Fugit maiores dolore. Consequatur asperiores architecto voluptate porro nulla distinctio minus provident. Corporis totam beatae illo alias soluta dicta. Laborum ipsa nam itaque. Cumque non distinctio fuga consequuntur a. Nostrum beatae repellendus veniam eos minus atque reprehenderit. Voluptatem nihil eos assumenda facilis excepturi eveniet libero occaecati ex. Vitae eligendi ipsum facere. Perferendis eos natus aspernatur. Assumenda ducimus officia. Officia corporis itaque eum. Vel vel corporis laudantium porro. Veritatis porro ipsum officia consequatur ea modi modi quae. Ratione odit saepe perferendis dolore maxime fuga quidem quasi. Aspernatur omnis quia. Fugit delectus rerum asperiores quos culpa. Nemo ex quidem ullam dolorem aliquam suscipit rerum blanditiis rerum. Cumque quia sed ut porro nihil officia molestiae laborum. Provident nemo corporis dolor corrupti sit officiis. Hic explicabo ut quidem itaque quas.

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