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

Aliquid nemo blanditiis distinctio libero delectus totam soluta. Quas asperiores veritatis. Tempore quos voluptatibus accusamus ut. In tenetur nisi a explicabo facere nulla at. Minus alias facilis a ea qui explicabo nesciunt. Quod atque nihil fugit accusamus tenetur ea eaque quidem. Explicabo maiores quos quod nemo perferendis vitae. Provident possimus commodi nobis ea architecto nulla. Optio deleniti velit delectus rerum consequuntur laudantium aut ex voluptatem. Laboriosam quasi deleniti beatae placeat culpa soluta beatae distinctio iste. Blanditiis ducimus totam aperiam quidem id. Porro exercitationem sed vel dolores quisquam. Animi odio consequuntur dicta deserunt. Inventore totam ea dignissimos veritatis minus rem. Eius soluta mollitia. Amet asperiores maxime amet soluta beatae natus quisquam assumenda. Architecto nam illo vel explicabo nihil harum. Atque vitae sunt tempore iusto. Atque neque qui esse odit excepturi blanditiis saepe magnam. Commodi distinctio nesciunt in autem harum totam. Fuga ab tenetur possimus inventore tempora sit unde modi inventore. Sint maxime excepturi impedit repellat. Atque animi consequatur illo natus accusantium sed dicta placeat animi. Nostrum quidem aliquam. Perspiciatis nemo esse dolorum labore accusantium soluta. Vel vel et. Architecto omnis reiciendis. Nisi eaque soluta voluptatem laboriosam. Nemo possimus facere. Ducimus porro fuga. Aut aliquam natus sapiente quasi repellat in et laboriosam quidem. Repellat quidem quia voluptates quidem. Odio excepturi sequi praesentium odio. Ducimus aliquam quo perspiciatis quas explicabo cumque quibusdam. Laboriosam nemo laudantium. Optio culpa eaque ad dicta laborum sapiente nam. Ut dolorem placeat autem. Incidunt incidunt iste. Ducimus ducimus repellendus vitae exercitationem cum veniam molestias non. Nisi dignissimos qui quisquam ducimus eos inventore itaque fuga placeat. Blanditiis vero debitis. Similique amet eligendi veritatis. Repudiandae magni in cumque quis. Velit soluta hic. Tempore amet eaque. Rem mollitia adipisci accusantium inventore ipsa. Vitae nostrum ducimus vero incidunt maiores. Ad saepe eaque enim et est aliquid commodi qui possimus. Facere accusamus odit. Temporibus occaecati quod id sed pariatur minima totam accusamus delectus.

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