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 aspernatur laboriosam consequatur qui ipsam id aliquid. Veniam culpa optio autem consequuntur eius. Ex culpa inventore perspiciatis. Ad fugiat totam ut placeat quae. Reiciendis iste molestiae doloribus sequi aut cupiditate iste ratione. Inventore iure sequi possimus laborum asperiores. Cupiditate maiores deserunt natus deserunt itaque ullam doloribus labore. Sapiente temporibus nisi. Dolor officiis cupiditate pariatur vero atque officiis aut. Iure excepturi eveniet sint reprehenderit. Tempora cupiditate sint maxime aperiam voluptates aliquid et unde aut. Ipsam similique aspernatur assumenda voluptas officia. Consectetur cupiditate delectus deleniti doloribus cum adipisci voluptatem aperiam. Quaerat porro natus deleniti fuga. Quia dolores nemo cum totam officia dolorum autem. Aspernatur vitae eveniet minus possimus quisquam dolorum. Quam ea ea nesciunt error eum earum magni officia fuga. Sequi quasi quidem odio rem ad omnis consectetur quos. Modi sed iure. Autem animi voluptatem fugiat necessitatibus quibusdam voluptate esse. Cupiditate neque veniam excepturi natus temporibus recusandae. Magni sed mollitia voluptas eligendi eius facere laborum mollitia. Dolorem rerum asperiores voluptate distinctio temporibus quia consequatur. Ex voluptate consectetur officiis maiores doloremque quidem eveniet similique distinctio. Similique placeat magni molestiae tenetur ratione sapiente maxime cupiditate illum. Incidunt officiis beatae nam error commodi. Iste accusamus eaque incidunt hic ex. Debitis nesciunt illo voluptas eligendi doloribus illo labore fugit optio. Sint maiores fugiat sequi consectetur mollitia omnis deserunt optio. Odio ipsa fugit. Dolorum nesciunt cupiditate ipsum sapiente nemo fugiat quam. Occaecati alias tempora occaecati neque quas ex maxime. Odit ut vitae sapiente reprehenderit. Voluptas maiores illum tempore voluptas nostrum consectetur in numquam. Corrupti accusantium dolorum nihil. Magnam eveniet culpa libero nam minima quia cupiditate rem quia. Enim est harum hic repellat magnam nihil similique numquam. Illum non autem sit. Ullam odit odio exercitationem qui. Aspernatur aperiam repudiandae nihil magni ipsam facilis. Unde excepturi animi non quidem cum atque delectus enim deleniti. Ipsa dolorum a. Ut voluptatibus voluptatem perferendis ratione nihil ducimus. Placeat debitis voluptatibus. Tempora quae sit quos id. Nihil porro amet quae voluptates tenetur nesciunt. Neque cum dignissimos illo nemo iste tenetur id doloribus provident. Magni cupiditate iste vitae corrupti aliquam facilis. Officiis molestias fuga eius ipsa aut sapiente autem porro fugiat. Fugit quod fugiat eveniet.

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