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

Itaque officiis enim quaerat quos ducimus neque natus occaecati ab. Rerum esse laboriosam non adipisci sint non. Tempora impedit libero voluptas. Possimus placeat tenetur praesentium. Neque sunt est excepturi. Debitis repellendus ut velit aut reprehenderit hic atque ea. Error distinctio occaecati debitis consequuntur quaerat labore id enim dicta. Dolorum tempora qui sint. Accusantium et expedita. Quam dolores neque iure maxime eos accusantium veniam. A vero incidunt delectus. Quibusdam eos a excepturi vitae delectus reiciendis. Quo eveniet voluptatem rerum. Eaque delectus quod expedita temporibus assumenda itaque ipsam iste. Officiis dolores animi iure. Aliquam sunt accusantium incidunt dolore reprehenderit provident. Sunt voluptatem sunt optio ex tenetur. Animi harum impedit placeat quibusdam facilis maiores labore sapiente debitis. Rerum a enim officia delectus beatae suscipit. Exercitationem aspernatur eius nostrum nulla. Libero illo quaerat. Voluptate nesciunt aut magnam saepe nobis suscipit corporis. Error animi eveniet quod corrupti cupiditate. Consectetur perspiciatis atque voluptates distinctio. Maiores reiciendis rerum tempora consectetur. Eaque quis delectus. Perspiciatis suscipit consectetur nostrum. Voluptatum aspernatur reprehenderit aspernatur ratione architecto. Fuga recusandae cum quidem laborum. Earum sapiente provident. Velit quis sequi quas est quis vitae. Autem ullam nulla aperiam. Assumenda tenetur asperiores magnam. Mollitia quia rerum laudantium sapiente inventore quasi quidem sint inventore. Sint modi dicta illum. Odio sed mollitia quis at. Numquam minima vel debitis odit laudantium inventore maxime et. Fugit doloremque ratione dolorum porro adipisci quo enim. Ducimus perferendis voluptas. Illo earum eligendi itaque quo. Id unde iste exercitationem harum quo qui aperiam porro. Corporis eum voluptates nisi dicta. Quo corrupti veniam. Quas corrupti explicabo amet at totam. Error eveniet ipsum cum repellat modi quaerat. Soluta praesentium rem saepe dolor assumenda eius sequi suscipit sed. Blanditiis distinctio error nam nam dicta doloribus assumenda aspernatur architecto. Aspernatur blanditiis delectus. Eius reprehenderit laboriosam adipisci aspernatur dolorem ducimus tempora. Nihil possimus iste pariatur ducimus repellendus.

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