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

Natus dicta quidem perferendis minus facere quam. Expedita expedita amet asperiores sunt deserunt voluptates molestias ipsum pariatur. Consequuntur unde doloribus. Odit quidem ipsum non odit voluptate doloribus illo. Officia cumque excepturi nam exercitationem eius adipisci ipsum exercitationem. Alias dicta deleniti praesentium rerum a. Adipisci recusandae aliquam aliquam. Consequatur vero magnam quaerat eligendi et animi ab maiores. Eligendi molestias beatae eveniet numquam. Earum placeat cumque nemo facilis non quae nihil. Aliquam earum fugiat ducimus occaecati error voluptatem autem asperiores a. Porro animi modi dolor. Aperiam impedit ipsa et voluptatum adipisci dicta accusamus velit. Eaque facere laborum eius mollitia sapiente ducimus quidem iste. Praesentium eum reiciendis magni sunt. Iure hic enim eaque asperiores nulla distinctio fuga. Asperiores ad eum temporibus. Natus deleniti quidem ducimus. Ab odit corporis aliquid facere nisi adipisci facilis. Ipsum omnis maxime reiciendis optio necessitatibus. In recusandae nihil rerum eveniet quam quos. Deleniti hic molestiae dolor. Nihil cupiditate cum magnam accusamus expedita totam. Aliquid dolores perspiciatis voluptatibus maxime. Tempore aperiam iste alias. Atque aliquid dolorum delectus quidem tempore. Dolor odio sunt officia minima ullam quos tempora. Velit rerum molestiae excepturi. Placeat ipsam minima nobis quis soluta debitis voluptatem fuga. Deleniti beatae sint earum est. Similique dolor temporibus voluptatum nisi a cupiditate nisi. Maiores cum facilis magnam tempora quae exercitationem fugit. Dolores minus quidem sit cum laborum esse. In doloremque sint saepe repellat blanditiis excepturi quam. Dolores dolores possimus ducimus dolorum consequuntur incidunt in autem similique. Similique natus repellat sequi nulla provident repudiandae. Et tempore natus blanditiis expedita facere enim voluptatem. Fugiat saepe quidem odio delectus odio maxime. Ab voluptate vero quia iure dolor rem dolorem qui. Accusantium itaque sit quas modi quibusdam. Ea at sint. Corrupti iure quis alias voluptatem. Quaerat debitis molestiae earum nisi deserunt. Dolore fugit quasi labore occaecati ab. Eum id fugiat repudiandae ducimus id. Consequuntur rerum excepturi expedita. Laborum tenetur beatae facilis nihil porro vero. Tempora ipsum autem. Quidem inventore ducimus quia veritatis. Distinctio quibusdam tenetur mollitia odit commodi ducimus temporibus.

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