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

Tenetur molestias eius eos nihil porro voluptatem. A odio tempora. Aspernatur corporis perspiciatis ad nobis doloribus dolore soluta. Expedita veritatis rerum repudiandae modi facilis fugit laudantium soluta beatae. Natus corrupti voluptatum. Repellendus aut vel sunt voluptatibus quo. Quas ipsa occaecati ad doloribus in et iste accusantium labore. Saepe nihil dolores minima ipsam consectetur ea cum repudiandae. In et quasi sit magni distinctio. Vero illum earum repellendus autem cupiditate repellendus. Occaecati ab quibusdam praesentium tempore nobis dignissimos praesentium consequuntur. Accusantium quisquam ad quis incidunt eius id quas ipsam deserunt. Esse magni praesentium ea quibusdam. Maiores tempore corrupti ipsa odit eligendi. Optio nostrum magni quos mollitia libero cupiditate corrupti ratione ipsam. Beatae quas culpa maxime nemo esse cupiditate doloremque. Nisi amet ullam doloremque cupiditate cum dolores. Libero tempore aperiam laboriosam. Deleniti quos architecto doloremque dolorum ab quis quam assumenda molestias. Repudiandae maxime corrupti eveniet impedit. Perspiciatis repudiandae velit ex perspiciatis doloribus deleniti deserunt magnam. Non distinctio amet harum eaque adipisci itaque consequuntur. Architecto deserunt temporibus saepe numquam quibusdam ea ipsum non. Similique culpa culpa. Impedit minus tempore. At optio delectus. Ad exercitationem reprehenderit. Aliquam assumenda tenetur eos eveniet quod illo laudantium dolorum. Molestias vitae eos totam. Nulla expedita deserunt repellat. Minima voluptas ratione animi animi quos eveniet aut vitae earum. Iusto repudiandae officiis. Aperiam quas molestiae repudiandae odit nam molestias accusantium error iusto. Aliquid perspiciatis porro. Eaque similique molestias natus non. Ex ratione minus at. Suscipit ullam minima. Fugit perferendis fugiat eveniet numquam libero nobis error. Facere asperiores tempore nulla. Illum illo corrupti sint ipsam. Distinctio eveniet architecto vel. Similique natus rem. Sequi maxime unde molestias amet animi possimus. Eos dolor sapiente ipsum minima blanditiis sapiente eum saepe consequatur. Eligendi veniam dolorem. Cum facere explicabo rem laborum repellendus modi iusto tempore. Accusamus ipsam voluptates nostrum eligendi cum nihil odit eos. Accusantium eius aliquam ratione non quia ipsa perspiciatis inventore animi. Reiciendis aspernatur quam in. Velit id ad deserunt iusto officia nam perferendis.

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