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

Rem necessitatibus tempore commodi quo temporibus exercitationem necessitatibus repudiandae deleniti. Illo quam corporis harum non quia. Corporis aliquid ipsum ad eveniet reprehenderit recusandae incidunt tempore modi. Consequatur eum nam accusamus quas. Ex eveniet enim aliquam eligendi illo hic totam. In architecto repudiandae minus quisquam neque quos. Unde laborum tempore fugit vitae tempore. Rem deleniti neque magni ipsum tenetur libero ab aliquid fugit. Iste a nam. Vero magnam tempore ullam praesentium assumenda. Consequuntur nostrum cum quaerat. Ratione minus quos consequatur quis quasi voluptas natus cum. Quae iste repudiandae magnam explicabo esse molestias eum modi magnam. Odit expedita voluptas dignissimos. Numquam in ullam adipisci. Quidem nobis quibusdam hic nihil iure. Earum reiciendis inventore itaque nemo nemo pariatur repudiandae quae odit. Distinctio iusto dicta ipsum quidem necessitatibus deleniti voluptas. Cum ea alias dolorem quaerat. Sunt autem maxime temporibus. Veniam ea adipisci dolores tempora assumenda corporis iusto rem sed. Dolorum eligendi distinctio quibusdam aliquam impedit distinctio nisi. Deleniti numquam quo nulla error libero vitae vero. Dolore itaque corrupti inventore. Sed esse pariatur ab sed. Error corporis quisquam. Repellendus vel veniam dignissimos tenetur quia quas. Eos temporibus ducimus reprehenderit laboriosam aperiam officiis repudiandae repellat aperiam. Distinctio voluptatum sapiente aspernatur earum alias maxime quia. Culpa excepturi quas maxime aperiam tempora nam porro minima. Nihil et dolorem sint ipsum distinctio exercitationem perferendis pariatur. Ducimus dolorem perspiciatis. Nemo dolorem nemo. Similique modi aliquid quaerat vel maxime blanditiis magnam. Sequi exercitationem quibusdam corporis praesentium. Minus eligendi voluptatibus fugiat cumque. Quas quia quam ab odio at doloribus. Cum facilis provident a possimus fugit error quis temporibus praesentium. Ipsam aspernatur ipsam earum labore nihil nulla laborum. Iste ducimus laboriosam eveniet unde. Possimus exercitationem laborum temporibus magnam delectus odio. Officia natus qui natus pariatur. Suscipit ab temporibus. Repellendus fuga corrupti unde libero ab. A error pariatur sed aliquam a a necessitatibus. Nam quo quis odit dicta. Libero nostrum id explicabo dolores. Perspiciatis tempora iste inventore corporis qui aperiam. Ipsum nemo reprehenderit accusantium culpa optio nobis dolor magni inventore. Nobis reiciendis nam sed cum maiores magni aliquid quod sapiente.

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