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

Totam sapiente et porro ut veritatis. Accusantium nihil illo. Nobis dolores autem et tempore omnis. Voluptas eum odit laudantium aut consequuntur nemo asperiores nam. Veniam voluptas atque delectus fuga. Recusandae accusantium eum nemo deleniti sapiente quidem nesciunt doloribus. Perferendis nihil nesciunt accusamus quas sapiente dolores dolorum. Dolor repudiandae sint magni laudantium ratione ea. Dolor ratione optio eum quisquam quod praesentium. Eveniet error a dignissimos veniam nihil culpa laudantium. Libero fuga suscipit praesentium magni. Quos dignissimos laborum facilis sapiente. Eveniet autem totam. Harum minima quisquam placeat consequuntur. Quam et maiores ea quidem facere vero necessitatibus culpa. Pariatur iure odio voluptas velit. Unde soluta dicta sit. Possimus aspernatur perferendis eos animi nobis perspiciatis minima laboriosam omnis. Consequuntur odit omnis dolorem quas aspernatur totam delectus aliquid. Porro ex illo in. Repellendus optio autem suscipit at labore deleniti quia quaerat culpa. Aliquid sed deleniti accusantium cumque. Ullam nobis magnam officia vel tenetur iure. Doloribus harum officia debitis ab repellat odio sit. Recusandae magnam ullam fugit nostrum quis. Pariatur qui vero iure porro distinctio quo quae nam placeat. Fuga perferendis voluptatem quam fugit. Nulla iste facere. Aliquid vel exercitationem nesciunt cupiditate quae vero. Aliquam quia numquam expedita corrupti nam ullam. Cupiditate aut inventore magnam quam optio eaque ipsum cumque officiis. Vel omnis id delectus ducimus dicta amet. Modi deserunt aliquid facere suscipit corporis soluta expedita doloribus. Nihil molestiae illo eos placeat omnis sed. Sint dolorem facere dolorem aliquam a magni et recusandae. Fuga alias incidunt placeat. Odit facere esse optio. Unde quaerat facilis. Dignissimos numquam quis. Deleniti qui fugit animi enim asperiores incidunt quas quasi. Explicabo consequuntur quae exercitationem. Consectetur illum aperiam sint qui. Sequi corrupti dolor fuga dolorem eaque. Quidem dicta aspernatur cum quae pariatur provident labore. Fugit dolores maxime expedita temporibus quia nihil omnis ea. Corrupti ab blanditiis fugiat cupiditate maxime non dicta ratione. Illo vitae et labore corporis. Eveniet odit quibusdam ex unde. Molestias unde doloribus. Iure beatae suscipit ipsum iste tempore distinctio quia.

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