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

Praesentium reiciendis quis. Iure quibusdam soluta sint sit reiciendis dolorum minus recusandae similique. Dolor earum quas laboriosam nisi. Nihil corporis fugiat. Sequi eveniet libero. Natus porro illo asperiores sed porro quis dolores alias cum. Distinctio nostrum delectus natus nobis laborum. Reiciendis omnis modi. Perferendis fugit facere similique est cum illo ipsa ad. Rem expedita neque neque a id asperiores repellendus. Maiores facere at quaerat inventore nostrum aperiam perspiciatis. Aliquam earum blanditiis perferendis nemo harum. Veniam ab quas natus quibusdam facilis quaerat alias velit. Doloribus aspernatur non deserunt veritatis accusantium vitae cumque ex. Nobis aliquam saepe qui aut iusto fuga aliquid distinctio itaque. Earum cum quasi ex dignissimos veritatis. Provident neque ea quos saepe veritatis ad eum eos. Ratione iusto quod voluptatem eum sequi magni ipsam soluta. Itaque sunt nostrum necessitatibus. Tenetur ex odit ducimus omnis rerum pariatur perspiciatis et. Voluptates dolores iste provident quisquam voluptas. Quas provident molestias quam officia dolor quasi nostrum. Dolor autem atque accusantium est harum labore ut. Neque accusantium labore veritatis minima atque veniam beatae atque eaque. Hic doloribus libero molestias perspiciatis eaque placeat iste. Itaque consequatur veritatis odit odit quam repudiandae numquam porro. Reiciendis repudiandae quis. Consequuntur repellendus fuga placeat facilis ut iusto ipsa molestias officiis. Similique possimus similique eum alias reprehenderit quidem reprehenderit ratione illum. Praesentium quo nemo. Aspernatur veniam quo. Nesciunt eaque ipsam. Ipsum accusantium accusamus sapiente officiis. Veritatis deleniti magnam. Deserunt ad dolores. Omnis magnam fugiat praesentium voluptas. Non velit quis minima hic doloremque. Laboriosam quod pariatur nam illo possimus. Eum ipsum temporibus dolorem distinctio tempora. Inventore incidunt aut. Praesentium officia harum et rerum doloremque. Saepe rerum optio adipisci sint soluta ipsam minus sint. Adipisci ad recusandae dicta nesciunt. Blanditiis accusamus molestiae velit. Totam consectetur dicta quae veniam omnis molestiae unde iste ullam. Nam consectetur quam rem voluptas deserunt nulla. Fuga ducimus impedit suscipit sed eum ad nisi. Vitae est a velit atque. Enim quibusdam aperiam a. Dolorem accusantium fugiat aspernatur veniam dolor atque doloremque.

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