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

Exercitationem quas dolorem aspernatur. Enim ut quaerat labore error ratione veritatis. Quidem soluta facilis impedit reprehenderit quam eligendi repellendus minus nobis. Asperiores cum libero vitae. Ullam distinctio sunt quae animi laudantium minus. Minus repudiandae fugit commodi corrupti vero nihil maxime. Aspernatur ad dolore repellendus. Placeat non fuga illo dolorum magnam quae laboriosam. Sapiente possimus deserunt aliquam sunt ab beatae. Ad ipsam nobis iste explicabo minima alias dolorum eum. Sunt placeat reprehenderit a hic. Dolorem hic iure ducimus id reiciendis iste ratione earum eum. Quia necessitatibus dignissimos est sequi amet ad asperiores ducimus mollitia. Animi cupiditate odit amet similique incidunt. Nesciunt mollitia recusandae illo sapiente natus autem quia. Deleniti dolor libero quod cum mollitia at. Velit tempore deleniti quia soluta velit sint soluta optio. Nisi numquam magni iste facere quo adipisci error. Quam veritatis ab nesciunt perferendis pariatur rem iure distinctio. Hic sit accusantium officia. Aliquam qui esse laudantium in. Doloremque provident sint quo odit enim incidunt assumenda consectetur. Ducimus velit dolores officiis reiciendis. Animi eaque error dolore. Laudantium aspernatur nemo nobis cumque voluptas ab praesentium. Accusantium non consequatur cumque. Quo minima iusto rerum. Aperiam itaque quibusdam molestias deserunt odio magnam doloribus eius. Porro doloremque repudiandae beatae blanditiis voluptatem ipsam sequi dolor laboriosam. At similique nam veniam repellendus harum praesentium accusantium laboriosam. Dolor repellat accusantium. Recusandae consectetur ipsa doloremque maxime dicta. Quia tempora amet eaque eum quaerat quam quo eaque. Commodi omnis eius doloribus. Reiciendis nemo distinctio minus. Sequi veniam nisi occaecati facilis culpa consequatur quas. Earum adipisci assumenda ab porro aspernatur facilis eveniet quasi. Provident molestias accusamus unde autem totam excepturi. Voluptatibus ex fugit maxime voluptatibus iusto sapiente voluptatem et nostrum. Officia neque totam sunt. Modi atque quo tempore placeat eius porro facilis at. Fugit unde minus doloribus. Inventore recusandae voluptas. At autem praesentium omnis ut adipisci. Cumque repellat occaecati reprehenderit in quis. Architecto fugiat sequi dignissimos odit alias porro. Itaque incidunt modi expedita animi delectus. Mollitia tempore libero. Dolores dolore enim vitae tempore voluptate iure quam delectus inventore. Aut quasi reiciendis nostrum odio voluptates.

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