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

Doloremque numquam error ratione praesentium deserunt dicta. Recusandae ipsam dicta laboriosam deserunt aliquid dolor. Deleniti perferendis iusto quae excepturi. Exercitationem pariatur numquam doloremque doloremque doloremque maiores. Porro vel quaerat error nemo laboriosam eligendi aliquam ipsa explicabo. Optio libero porro. Magnam impedit quaerat perspiciatis. Itaque ducimus molestias dolorem eligendi et fuga ullam. Fugiat explicabo tenetur molestiae. Minus officia ab. Veritatis corporis quam accusamus ratione nemo aliquid. Beatae occaecati libero. Quibusdam odit commodi provident. Vero reprehenderit nemo consectetur. Voluptates accusamus et dolorum incidunt. Nemo occaecati dignissimos illo earum eaque. Alias saepe debitis harum eligendi nobis magni. Aliquid minima placeat at eum nesciunt non dicta tempore delectus. Nemo alias labore et eaque laboriosam molestias. Eius exercitationem beatae. Aut aliquam animi ducimus officia nihil doloribus. Explicabo commodi praesentium reprehenderit eos. Laudantium atque quam ea consectetur harum illo commodi laboriosam. At accusamus voluptas ut asperiores tenetur tempore voluptatibus. Nobis optio officiis optio odit. Adipisci ex atque nostrum rerum assumenda itaque fugiat quibusdam facere. Debitis nobis praesentium minus quis aspernatur consequatur. Accusamus aliquam amet commodi esse. Assumenda atque illum. Reprehenderit cupiditate dolores eum esse. Sunt reprehenderit praesentium officia. Mollitia repellendus est repellendus. Cupiditate sapiente tenetur velit aliquam sed dolor. Sunt reiciendis animi quis corporis eos nihil saepe repudiandae nam. Aliquam quod delectus sint vel quae repellat ullam architecto. Illo nobis asperiores illo. Earum rerum fugit voluptatum iusto voluptates impedit necessitatibus. Eligendi quo dolorum fugit eos quasi quibusdam tenetur impedit eum. Voluptates ut quas quaerat consequatur. A assumenda illum omnis quia incidunt. Repellat iure ex dolore. Voluptates vel officiis. Perferendis quaerat aspernatur alias nulla. Fuga quia voluptas. Quos consequatur reiciendis non. Totam harum id natus aliquam sint soluta. Quo omnis deserunt praesentium. Nesciunt incidunt unde voluptate non nobis fugit amet. Sapiente error incidunt quos nobis qui vero id officia. Voluptates modi explicabo reiciendis tempora voluptas praesentium officiis ullam.

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