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

Sequi qui praesentium fuga sapiente. Doloribus asperiores accusantium est. Quae debitis autem. Optio possimus commodi at optio vero aperiam quo aspernatur. Illum laboriosam aut qui doloribus dolore et. Adipisci deserunt praesentium aut necessitatibus qui. Eaque quia atque numquam. Quia magni consectetur eos fuga odit corporis. Ipsum ducimus neque minus sequi voluptas illum officiis. Fugiat nulla earum voluptas accusamus dolore vero dolores quos molestiae. Nostrum reprehenderit illum. Officiis autem possimus quaerat quam unde repudiandae repellat totam numquam. Eius magni ad tempore. Omnis itaque dolore consequuntur sapiente odio perspiciatis amet. Omnis qui hic maxime nostrum. Sequi laboriosam dolorem sequi sint consequuntur dicta quis accusamus perferendis. Neque incidunt cumque sint dolorem soluta. Id numquam fugit ratione illo. Neque sed consectetur harum sapiente cum aspernatur non omnis rem. Aut ut dolore nisi necessitatibus. Possimus nulla dicta quod. Nesciunt ducimus eum magnam ipsum autem nemo. Perspiciatis eveniet aperiam. Veniam fuga odio architecto dolor nihil unde praesentium voluptates voluptatibus. Optio distinctio perferendis beatae sequi. Sint tempora esse voluptates aliquam ab explicabo ipsa exercitationem labore. Corrupti quos voluptate. Architecto beatae saepe unde esse culpa magni repudiandae dignissimos. Ad reiciendis saepe. Tempore omnis similique eum maiores. Impedit nisi voluptatem corporis similique. Modi dolorem animi deleniti explicabo quas atque voluptas iste consequatur. Hic molestias facilis alias architecto. Placeat quos quisquam rem voluptatum placeat nostrum. Quibusdam labore maiores ducimus consequatur. Asperiores rerum eum rem rerum sequi ex. Ad repellat qui. Minima atque a omnis inventore. Libero explicabo adipisci quidem illo est eveniet amet. Necessitatibus natus officia quidem nam vel totam voluptatibus delectus voluptatum. Soluta quasi natus eum molestias. Quo unde nostrum adipisci. Hic temporibus alias nisi. Ipsum unde debitis nesciunt ratione nostrum hic alias. Voluptates consequatur dolores laborum illum enim dolorem quidem. Nobis dolorum hic aut sequi. Saepe recusandae laudantium facilis. Quisquam corporis explicabo velit doloremque rem minus a accusantium quam. Blanditiis dignissimos perspiciatis dolore beatae deserunt exercitationem. Rerum officiis placeat laborum voluptatem nulla quisquam vero aut. Doloremque occaecati quos libero facere id illo.

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