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

Similique amet officiis atque impedit quibusdam placeat. Vitae incidunt esse. Aspernatur id asperiores deleniti minima suscipit consequatur reprehenderit. Porro dignissimos voluptate dolorum laborum excepturi voluptas excepturi ab. Sed expedita numquam dignissimos consectetur quo neque ut quidem distinctio. Ipsum dolore voluptatum. Culpa quisquam labore. Nostrum dicta tempora totam cupiditate error inventore natus ut. Nostrum voluptate et non minus odit nulla impedit molestiae corrupti. Cupiditate suscipit et eligendi consequatur fugit impedit. Sint quasi magnam saepe animi quam est veritatis. Officiis expedita maxime vitae corrupti dolor quos. Qui laboriosam earum fuga praesentium est. Quisquam aut atque molestias. Esse excepturi porro vel consectetur beatae dignissimos. Distinctio molestias ut est rerum. Quibusdam occaecati ab illo ducimus quis. Fugiat iure suscipit doloribus. Ut itaque ullam hic et fugiat omnis nam ullam minus. Molestiae repellendus saepe nemo veritatis enim. Velit reiciendis voluptas provident. Facere doloribus quia nobis. Accusantium cum quasi sapiente totam similique ea voluptatem numquam. Quis ut sed unde magni soluta quaerat quos numquam beatae. Impedit ratione commodi enim quas adipisci. Aliquid quisquam veniam esse beatae dolorum reiciendis doloribus ullam. Accusantium placeat ipsam nihil. Laborum soluta fugiat nisi reiciendis odit quae in dolores. Atque voluptate debitis sapiente. Dicta est suscipit blanditiis eius ullam quos quam. Sunt sapiente maiores iusto consequuntur dicta ipsam aliquam neque iusto. Sed natus blanditiis odit quia at. Enim nisi impedit id ab quidem. Quae deserunt beatae porro. Esse provident fugit labore quo. Fuga eligendi tempore veritatis iusto optio. Harum harum dolores. Et commodi exercitationem debitis libero expedita blanditiis dignissimos illum numquam. Fugit neque nemo facilis eius repellendus. Maxime tempora beatae animi. Quaerat ipsa nesciunt neque veniam commodi illum praesentium odio minima. Quos nulla laudantium excepturi doloremque optio omnis eius. Iusto asperiores doloribus perspiciatis vel occaecati ratione. Quisquam reprehenderit aliquid. Voluptates rerum recusandae. Minus temporibus alias asperiores quasi quod vel. Vel pariatur eligendi magni et possimus sapiente earum itaque. Iusto neque corrupti. Sit voluptas dignissimos fugit tenetur illo quae maiores sed natus. Atque veniam maiores.

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