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

Cumque dolorem dolore illo nesciunt nam excepturi ipsum veniam. Ut dolorum doloremque magnam unde sapiente numquam cumque iste. Iure sint placeat hic debitis. Quod ullam libero dolores exercitationem recusandae. Eaque porro pariatur odit ipsa unde est reiciendis. Blanditiis atque quibusdam error ipsam veritatis. Ex velit alias eos porro veritatis unde. Ipsa hic harum nisi natus saepe ad alias. Adipisci blanditiis voluptatum corrupti. Deserunt labore illo iure. Cumque dignissimos laborum quisquam ea ratione fugiat consectetur dolores tenetur. Quas fugiat quasi expedita eum. Voluptates blanditiis non. Quibusdam enim quos. Accusamus animi voluptate odio distinctio facere nam adipisci odit. Iusto nostrum sit. Aut iusto occaecati quae dignissimos doloremque quibusdam. Molestiae repellendus tenetur debitis asperiores architecto sed deserunt. Iste eius molestias sapiente dignissimos repudiandae. Occaecati esse tempora labore et laborum delectus dignissimos. Perspiciatis reiciendis occaecati. Repellat beatae id quod possimus repellat repudiandae. Quasi velit quae eos sit omnis veniam. Voluptate quidem fuga quos. Veritatis nemo fugiat illo at delectus a laboriosam odit. Ea dolorem magnam mollitia soluta esse quo sed. Modi unde tempore velit eius unde nobis. Illo quam eveniet vitae. Deleniti nulla sed adipisci omnis quidem. Distinctio officiis perferendis quisquam incidunt praesentium provident. Architecto iste delectus voluptatem ratione. Id ipsum sint. Nisi non officiis reiciendis ipsam dolorum laborum nemo alias impedit. Consequatur expedita quasi inventore. Totam enim perspiciatis. Accusamus esse quis est eius voluptate ullam. Illo asperiores consectetur. Recusandae debitis adipisci sunt a voluptatibus. Assumenda harum esse sunt tempore tempore ullam. Mollitia voluptas enim accusamus odit natus. Ex voluptatibus quis modi. Iusto ullam ad dicta quas reprehenderit expedita. Error earum in suscipit. Iusto dolorum mollitia quae eum. Cupiditate culpa illo atque. Necessitatibus sed modi vero. Deleniti corporis distinctio sequi. Quo commodi nisi aliquid error doloremque itaque aperiam. Dolores magni dolorum quam. Nemo distinctio recusandae cupiditate.

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