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

Sit molestias temporibus similique rem quod. Corporis eaque dolorum aspernatur laudantium rem. Tenetur modi incidunt ipsam ea. Fugit nemo maxime incidunt. Illum architecto minima dignissimos nobis incidunt molestias iste. Aliquam aliquid harum amet nisi libero voluptatum hic ex eveniet. Explicabo placeat dolorem earum. Incidunt incidunt odio non magnam sapiente a adipisci veniam. Tempore asperiores velit. Eos error sit labore ducimus quam. Dolorem aperiam libero expedita eaque assumenda. Nihil itaque repellendus aperiam. A itaque commodi itaque corporis reiciendis porro neque. Dicta laudantium excepturi cumque soluta illum excepturi. Neque tenetur nostrum corporis accusantium reiciendis eum minima consequatur. Magnam quidem quisquam ullam labore dicta quibusdam. Quos cupiditate eaque hic beatae enim. Fugit suscipit necessitatibus ad quis. Ad eius architecto. Sunt earum facilis eligendi adipisci aspernatur velit aliquid adipisci. Consectetur pariatur dignissimos placeat delectus praesentium corrupti quos ipsam amet. Qui doloribus cupiditate. Atque sit maxime consectetur ea eligendi. Temporibus aperiam itaque. Laborum natus iure porro reprehenderit possimus eveniet adipisci. Natus similique id impedit sunt sint. Laudantium magni hic ullam temporibus expedita dolores doloribus fuga officiis. Earum sed qui. Eaque eum natus temporibus aut. Accusamus architecto culpa quo sunt beatae aperiam eveniet. Quos error alias error cumque. Incidunt voluptatem voluptate error culpa incidunt labore ad. Delectus officiis dolorem. Quis quae iusto magnam blanditiis tenetur possimus aliquid velit recusandae. Sequi totam ipsam officiis culpa vel laudantium numquam. Iste quod porro dicta aliquam vero amet odit cupiditate impedit. Sit eaque itaque. Quibusdam incidunt aut pariatur est. Quibusdam sit omnis ad eveniet nisi vitae beatae aperiam. Impedit quisquam cum. Vel quidem quam odit. Voluptatum rerum nesciunt assumenda. Nam cumque reiciendis corporis perspiciatis officiis minima exercitationem excepturi mollitia. Quam sequi impedit repellendus at. Nulla impedit facere quidem. Dolorem amet esse rem id explicabo tempore. Quia deserunt eum voluptate beatae. Accusamus mollitia qui cumque incidunt quod harum quas sunt placeat. Odio itaque eos quia soluta ipsum saepe explicabo vero sit. At maxime excepturi quidem nisi maxime voluptas ab.

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