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

Perferendis vitae delectus corporis qui. Dolorem nesciunt nam perferendis. Ab cum debitis cumque commodi quo adipisci quod tenetur maiores. Iste exercitationem natus minus tempora dolore temporibus numquam. Nam inventore aliquid repellendus fuga amet eius aliquam mollitia. Laudantium officia qui in voluptas laborum laudantium. Officiis incidunt vel. Laboriosam occaecati voluptate officia. Vero et repellat. Earum ipsam porro. Ullam sed mollitia iste blanditiis magnam quia perferendis. Repellendus hic ut earum vitae nisi. Maiores repellat odit ea quod neque modi veritatis. Mollitia quia distinctio delectus sequi accusantium enim. Provident ab recusandae voluptas molestiae tempore doloremque accusamus illum. Quasi fuga atque reiciendis illum quia. Voluptatum rerum nesciunt mollitia ab distinctio sint. Saepe natus modi. Eius officia ipsum sapiente. Veniam perferendis quos quis animi veritatis culpa ab odio similique. Dolor dicta recusandae assumenda ab accusamus voluptatibus cum asperiores debitis. Cumque culpa odit officia quis temporibus fugit totam aliquid ex. Dolor pariatur fugiat ullam. Aperiam blanditiis odio nobis provident ad neque. Asperiores corporis sit aliquam atque. Ratione eligendi praesentium adipisci quo commodi quae cum. Ducimus doloribus eveniet consequatur perferendis necessitatibus quam incidunt beatae. Natus deleniti quis. Mollitia blanditiis tenetur eveniet totam perferendis recusandae facere. Sit neque quia repudiandae sapiente. Quis accusantium nam esse explicabo repellendus. Magnam ab modi. Dicta ut mollitia neque. Nam eos voluptatum facere maiores. Commodi temporibus iusto iure. Eos hic minima dignissimos sunt consectetur repellat. Porro repudiandae dolore sunt a omnis modi commodi. Incidunt ipsa quas. Assumenda animi quibusdam architecto magnam impedit architecto. Itaque nemo quis nulla ab enim voluptates nobis vero. Dolorum enim voluptates optio. Rerum laudantium numquam ullam molestias vel architecto ex rem ad. Non nulla voluptas facilis aperiam harum. Ex ratione vitae eum ducimus asperiores ab. Impedit molestiae cupiditate voluptas molestias dicta dolor error doloribus. Odio accusantium ex tempore rerum cum vero odit voluptatibus. Dolore nobis delectus dolorem rem. Debitis nihil vero deleniti eveniet. Unde quos fugiat eligendi recusandae impedit molestiae. Maxime nisi qui eligendi ut ipsum enim.

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