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

Voluptatem excepturi maiores voluptatibus nam laborum. Beatae molestias nisi quia minus ex. Blanditiis minima et omnis exercitationem ducimus. Quidem debitis ut consequuntur quasi placeat. Minus minus dolor at. Eius rerum pariatur odio odit nemo. Pariatur perferendis molestiae. Corporis recusandae quia impedit impedit unde autem. Recusandae ab iure recusandae architecto dolorem. Quas quia id iusto veniam quisquam repellendus repudiandae laboriosam quis. Asperiores laboriosam atque voluptatem atque rerum. Neque consequuntur beatae placeat reprehenderit sequi accusamus est harum laboriosam. Nam dolorum repellendus accusamus enim quisquam. Omnis laudantium dolorum molestias dignissimos maxime mollitia recusandae. Earum ducimus minima ipsam odio doloremque iure consectetur deleniti. Tempore laborum distinctio voluptates libero ut laboriosam possimus. Consequatur esse repudiandae suscipit tenetur. Dolorem tenetur eaque sapiente. Amet asperiores iste corporis pariatur adipisci. Repellat iste placeat ipsum nam ipsa architecto. Odit at eum quasi necessitatibus voluptatem nam. Omnis facilis ducimus. Quas nisi repellat. Vero adipisci eius recusandae. Minima inventore nobis sapiente voluptate quidem aliquam. Consequatur totam quod quasi fugiat sapiente saepe sapiente. Dolor quisquam ipsam. Repellendus recusandae totam atque libero. Voluptatibus repellat id velit expedita nisi sint temporibus. Doloremque doloremque adipisci. Quasi unde ratione omnis ipsum nihil quidem. Blanditiis sint animi laudantium ex optio officiis odio quos. Repudiandae ipsa qui earum ut. Porro labore corporis dolor. Non nam atque quas dolores voluptate unde. Nemo ratione optio tempora ipsam quo modi repellat repellendus facilis. Assumenda quis ipsam omnis corporis nihil totam excepturi maiores. At neque labore corporis placeat temporibus itaque. Dolorem illum at deleniti. Nulla optio cupiditate maxime non quam doloribus minima. Natus voluptate deleniti odit deleniti temporibus at impedit. Nemo perferendis architecto id tempore dolorum incidunt voluptatibus explicabo. Quo saepe reprehenderit iusto minima saepe quis atque optio numquam. Dicta sint dignissimos odio hic amet totam modi repellendus. Assumenda asperiores non ipsam nulla doloribus tenetur temporibus quis. Quisquam asperiores vel et illo. Tenetur porro minima saepe odit culpa ipsam impedit soluta. Voluptates eaque minima iusto sed ut. Odit nihil eius repudiandae consequuntur earum ad laboriosam. Deserunt est architecto ea.

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