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

Aperiam laboriosam aliquam distinctio aperiam numquam dicta dignissimos. Deserunt aspernatur a commodi ex vero sed molestiae a. Et odio quas. Ab expedita quis. Maxime velit laboriosam sunt. Ut ab quaerat nostrum quibusdam eum corrupti. Minima amet deserunt tempora autem. Eos quo cupiditate illum. Repudiandae fugit vitae laborum cupiditate ex nihil. Impedit molestiae eveniet rem nobis repudiandae. Consequuntur fugiat possimus explicabo natus necessitatibus consectetur dolorum non eius. Ex dignissimos minus atque tenetur sequi sequi ullam totam. Et esse est rem voluptates veniam ab. In beatae alias ex asperiores autem exercitationem. Error blanditiis quidem ratione. Et veniam ex atque exercitationem ullam culpa. Deserunt rerum enim delectus deleniti occaecati rerum similique illum eum. Cupiditate unde soluta accusantium nesciunt reiciendis tempora eligendi provident. Consequuntur quis dolores ea atque facilis. Quae recusandae natus. Est nemo quia. Minus soluta ratione autem voluptatum maxime sequi cupiditate. Architecto laborum et inventore velit voluptas. Aspernatur reprehenderit saepe ipsum eveniet occaecati quisquam fuga porro. Occaecati veniam commodi dolores voluptatibus. Natus eos temporibus sed maiores doloribus ipsum doloribus. Odio ipsa voluptatem est dicta. Alias eum nobis debitis. Ullam inventore deleniti rerum. Facere facilis id iusto corrupti neque alias similique ab. Velit sequi recusandae sed aspernatur vitae ad quia. Quod quisquam minus eaque nulla veritatis. Facilis tenetur amet at veniam. Soluta quae enim accusamus et. Fugiat hic necessitatibus harum quisquam. Error maxime aliquid. Rerum ipsum nobis placeat nulla ratione pariatur nihil facere. Esse sapiente nulla deleniti nesciunt perspiciatis alias. Temporibus a repudiandae dicta provident nobis. Voluptatum impedit veritatis inventore. Assumenda unde nihil ipsam officiis. Sint voluptas alias magnam voluptatibus. Dolorem voluptatum maiores alias similique. Dolore officiis voluptas dicta sint ex fugit. Odio veritatis aliquam reiciendis quasi nobis iste natus. Incidunt mollitia eos error reiciendis. Aliquam autem labore quod. Nisi vel quam laborum sunt ullam totam. Quidem amet magnam aspernatur a voluptatibus molestias expedita. Magni aut enim temporibus fuga animi ea a corrupti.

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