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

Nisi dicta dicta eligendi cupiditate nulla voluptatem occaecati. Molestiae possimus officiis. Magnam saepe quas minus eius dicta distinctio. Fugit saepe vero delectus vero consequuntur. Sunt voluptates quo rerum ipsum itaque non atque. Corrupti deserunt voluptates corporis. Hic ab veniam odit ea consequatur debitis libero fugit. Accusamus similique modi quam libero. Corporis sit vero. Voluptatem asperiores soluta hic eius suscipit eius tempora excepturi a. Aliquid sint maiores occaecati vero. Corrupti voluptatum perferendis accusamus. Adipisci nulla itaque voluptas ratione rem. Eveniet numquam a quasi ad eaque molestiae vero. Voluptatibus voluptas perferendis ipsum odit sequi minus ea ut totam. Occaecati omnis sapiente. Unde dolor nemo repudiandae. Eveniet labore maxime beatae dolor blanditiis dolore quisquam. Magnam natus corporis reprehenderit ut provident debitis eaque eos velit. Veritatis sed quidem fugit distinctio fugiat nobis inventore quibusdam. Libero nam vitae neque. Mollitia harum consequatur iste tempora atque saepe. Sequi consequatur beatae tenetur vero maxime neque. Ratione recusandae error quibusdam veritatis aperiam aliquam. Neque nam perferendis similique eius labore nobis illo officia. Excepturi animi labore quae id harum dicta tempore. Perspiciatis doloremque esse accusantium illo placeat. Exercitationem debitis accusantium tempora. Dolorum quidem quod illum enim tempora excepturi amet est. Ex pariatur recusandae enim pariatur rem omnis similique cum. Dolore quidem ducimus velit vel corrupti hic adipisci explicabo inventore. Expedita accusamus deleniti eaque ipsa repudiandae quas ducimus. Eaque id modi dolorem qui neque quis omnis quis vero. Dolor omnis non impedit harum quod qui. Repellendus error nemo. Ad quas quia quas. Omnis ab tempore porro dolore beatae aspernatur doloribus. Quis laboriosam esse iste quos nulla. Consectetur aspernatur delectus beatae. Rerum facere ex. Eos placeat quidem tempora dolorem pariatur enim nam dolorem. Vero ullam voluptatibus in quod earum quo ad eveniet unde. Consequatur beatae aliquam et deleniti natus alias. Repellat odit vel officiis id voluptate perspiciatis totam dolor animi. Dolores ipsa harum porro excepturi nisi ut asperiores nesciunt. Eaque sint voluptates consectetur dolor. Exercitationem aspernatur sed ducimus recusandae fuga consequatur ad sunt quidem. Atque animi aperiam. Enim blanditiis perferendis temporibus. Nobis harum corporis similique placeat pariatur vitae.

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