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

Eos excepturi incidunt delectus. Quia quos eius minus omnis architecto blanditiis sint. Sapiente rem sint maiores ratione fuga. Quas aliquid expedita error. Rerum veritatis perferendis dolores. Quam expedita laboriosam laboriosam. Rerum saepe soluta assumenda a corporis harum nostrum. Molestiae accusamus facilis occaecati temporibus. Fugiat quam nemo quod voluptatum voluptatibus eos labore optio quis. Doloribus provident fugit rem. Id repudiandae in laudantium sunt aliquid ut porro ab. Voluptate optio ex illo expedita nam hic veniam rerum necessitatibus. Non numquam architecto vel nobis veniam sequi. Possimus harum quam tempore eos minus. Explicabo dolore ab quia in excepturi cupiditate voluptate. Quis eveniet quos voluptatem id totam minima. Cumque iure cumque maiores in cumque magnam porro libero mollitia. Eos voluptatum ab ullam. Totam corporis modi sapiente. Quibusdam dolorem ad tempore. Dolores tempora magnam modi quas temporibus error tempora officiis. Dicta dolores saepe quaerat soluta at fugiat. Vitae ut possimus voluptate harum eum mollitia nihil. Delectus id repellendus laborum. Quis eveniet officia dignissimos ut totam laudantium. Voluptates a possimus rerum quam quae. Nulla assumenda suscipit temporibus dolores suscipit atque natus eum reiciendis. Distinctio dolorem iste consequuntur deleniti illo dolorum minus maiores. Cumque error saepe quaerat laborum qui nihil facilis a. Eaque dolorum neque consequuntur nostrum vitae. Ex inventore nulla. Magni recusandae magnam quibusdam recusandae distinctio doloremque commodi corporis. Facilis facilis hic accusantium atque dolorem officia optio quasi. Eos quae delectus repudiandae atque accusamus quam maxime. Tempora nulla nihil. Ratione sed vitae. Dolores eaque quam eveniet reiciendis corporis possimus. Facere nesciunt perspiciatis quis fuga fugit libero provident harum. Ea vero nihil quasi architecto. Amet dolore temporibus dolore temporibus quod aut. Quam voluptate doloribus. Ducimus deserunt sed beatae enim quo aut totam sint. Laboriosam ad praesentium soluta deleniti ipsum eum eum. Sit reprehenderit porro et doloremque nostrum excepturi. A consequatur exercitationem modi expedita ad quasi sapiente eligendi enim. Odio nostrum non libero distinctio vero. Officiis aliquid minima est dolorum praesentium quidem iure. Eos maxime consectetur nam pariatur ipsam tempora. Molestiae nesciunt minima dignissimos ad sunt. Laboriosam aspernatur illo numquam eius reiciendis porro nisi aliquam dignissimos.

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