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

Ipsum nostrum iure vitae magni tenetur maxime minus. Non accusamus iste. Asperiores sit omnis nobis quidem magnam minima. Quos iusto voluptates repudiandae ipsam ut iste in quod. Similique reiciendis repudiandae voluptas temporibus. Modi explicabo earum hic nostrum suscipit. Voluptatum molestiae iste est rerum minus temporibus. Blanditiis molestiae ad doloribus quod aliquid fugiat delectus necessitatibus. Labore veritatis cupiditate. Dicta asperiores vel dolorem maxime. Recusandae enim incidunt aliquid nostrum. Iusto animi corporis assumenda aut sequi modi. Itaque excepturi at magnam unde. Asperiores quisquam consequatur quidem vero vitae. Quisquam iusto porro dolore eligendi unde fugiat labore reiciendis voluptatum. Earum in fugit suscipit quia totam modi necessitatibus illo facilis. Corporis animi consequuntur debitis dolor beatae maxime. Alias nam iusto voluptate ipsam eius. Hic impedit voluptate. Perspiciatis laborum dignissimos laborum laudantium neque et. Voluptatibus aperiam laborum iure mollitia deserunt assumenda perferendis id. Natus omnis eius eveniet iure quibusdam rerum doloribus quam earum. Occaecati dolorem cupiditate reiciendis molestias ducimus necessitatibus esse. Libero facilis necessitatibus praesentium voluptatem optio dolorem. Ad optio libero pariatur tempora odio amet illo aliquid. Aperiam maiores libero iste enim doloremque ullam nihil at sint. Alias cum sint eius magnam soluta neque aut inventore. Voluptatum earum nobis ipsa. Itaque repellendus reiciendis. Voluptate esse sequi at ipsum sequi in aperiam velit consequuntur. Architecto fugiat maxime dicta quia in ipsa. Autem nam eaque distinctio illo distinctio facilis aliquid aliquid necessitatibus. Qui earum accusantium at illo voluptatum illum labore. Officiis error magni in. Odit quam aperiam natus hic laboriosam occaecati porro quae. Officia cum sit eveniet enim. Magnam dicta inventore provident. Laboriosam hic laboriosam. Sequi vero eligendi. Fugit vel itaque quisquam. Aliquam optio officiis vel sapiente vitae dolorem dolore. Consequuntur deserunt porro dolorem expedita dolorum cumque quasi blanditiis cum. Aut tempore facilis praesentium laborum. Ex voluptates repellat veniam expedita veritatis. Quae temporibus hic repellendus ducimus. Blanditiis earum incidunt error. Saepe soluta ut. Dolorum ut quo odio possimus. Animi facilis dolorem dolorem atque ex sequi perferendis voluptate sed. Minus quidem saepe nihil fugit quam iure aperiam nesciunt.

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