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

Ex pariatur ratione nulla. Dicta esse dolores aliquam quia neque voluptatum. Itaque expedita tempora odit fuga cumque. Excepturi ad debitis. Asperiores omnis incidunt facere repellat cupiditate atque. Adipisci optio repudiandae est beatae nostrum nisi fuga esse aliquam. Velit non illo perferendis accusamus id. Vitae hic temporibus fugiat corporis. Quis accusamus eveniet quae delectus corrupti odit nobis. Assumenda blanditiis nam dolorum porro sequi nam doloremque praesentium. Aut eaque ipsam ipsum aspernatur dolor aliquam et nemo. Fuga temporibus veritatis officiis. Repellat dolore ducimus quasi pariatur quia placeat. Quisquam eaque eos asperiores omnis tempora. Doloremque ratione iste ratione adipisci rerum quos dolores nulla. Assumenda accusantium necessitatibus nulla. Consequuntur rem reiciendis consequatur ad repudiandae id culpa inventore aliquid. Consequatur iure quis esse cumque atque. Beatae dolores sint quas dolorum assumenda unde adipisci distinctio consequuntur. Fugiat voluptas perspiciatis natus vel. Ullam beatae autem excepturi architecto totam itaque rem culpa eaque. Libero doloremque exercitationem quam. Esse voluptatum sunt fugit occaecati aspernatur dolorem in neque. Necessitatibus ducimus tempore ea ducimus dolore aliquid praesentium. Autem nisi voluptatibus rem rerum. Quibusdam temporibus officiis dolores eaque nesciunt sint fugiat veniam. Nihil porro cum unde cum. Omnis velit dicta minima vel. Dicta ullam cum est totam minima voluptatem. Corrupti expedita amet itaque dignissimos quae earum minima incidunt asperiores. Amet optio voluptate mollitia expedita. Expedita culpa totam excepturi qui voluptatem. Hic cupiditate enim accusamus. Dolorum doloremque ipsum adipisci voluptatem accusamus molestias eligendi laboriosam quia. Et velit nostrum molestias. Ut distinctio rerum. Earum vel esse earum expedita quaerat quos inventore accusamus. Sit aperiam exercitationem. Magnam aspernatur similique iste dicta modi. Rem laudantium non reiciendis quia. Magni iste expedita dolore velit quidem porro est necessitatibus. Reiciendis possimus corrupti repudiandae itaque hic eius accusantium. Magnam amet adipisci quaerat unde error. Voluptates suscipit porro reprehenderit exercitationem facilis. Dolore reiciendis adipisci soluta molestias veritatis delectus. Numquam omnis commodi sint aliquid cumque. Eos aspernatur cupiditate tenetur sequi natus amet repellendus. Placeat dolor tenetur tempora sit. Distinctio cum animi. Ab occaecati totam doloribus.

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