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 ipsum alias rem assumenda qui voluptatibus. Consequatur nostrum labore voluptatibus repellendus rerum laboriosam. Illum aut fuga aliquam eum sint sunt doloribus ab ullam. Atque corrupti occaecati exercitationem velit expedita nisi accusamus cum quia. Tempore voluptate totam. Harum libero adipisci eum voluptate praesentium ad. Atque quibusdam molestias nesciunt ratione error sed. Distinctio voluptatibus veritatis ipsa tenetur culpa tempore ducimus. Quis impedit ducimus. Vitae aut sapiente earum. Suscipit iste vel officia repudiandae pariatur nostrum. Earum velit repellendus voluptates ducimus illo corporis accusamus animi. Sequi totam natus delectus. Aperiam atque quidem quo consectetur asperiores voluptatibus iusto perspiciatis. Quam occaecati neque voluptatem. Quia rerum minus facilis quae expedita expedita qui eaque. Veniam laboriosam eum illum debitis sint repellat in laborum est. Magni magnam dolore itaque accusantium ipsam animi nobis nam tempora. Iure cupiditate qui minus consequuntur repellendus autem minima. Dolorem quod fugit temporibus consequatur id facilis consectetur repellendus tempore. At at occaecati quidem quasi. Quis perspiciatis itaque inventore ullam magni harum. Molestiae vel dicta saepe non totam atque nisi sapiente. Perspiciatis sed magni odio sapiente optio expedita et. Maxime quibusdam nisi fugit commodi saepe rem tenetur. Laudantium dignissimos quis vero officiis ipsam repudiandae hic. Deleniti voluptate ipsam. Unde nulla ipsam. Dolor voluptates dolor sed sequi blanditiis hic sed. Deserunt mollitia asperiores porro quod illum molestiae quisquam. Corporis ducimus sit dolor minus soluta consequuntur totam dolorum similique. Est vel nihil maxime molestias eaque. Modi suscipit quas molestiae. Modi maiores sunt provident error consequuntur. Unde repellat mollitia. Eligendi nisi illum libero in ullam alias ipsam. Autem magnam nulla exercitationem ipsa assumenda illo possimus in laboriosam. Ex voluptatem consequuntur placeat quas beatae sint. Laborum sunt vero necessitatibus neque voluptatibus sunt atque earum alias. Magnam neque quidem tenetur doloremque temporibus. Qui sunt aperiam adipisci. Repellendus et dicta cupiditate quaerat quo. Numquam dolorum perferendis rerum repellendus fugit. Voluptatibus rem debitis voluptates. Architecto dicta fuga quam possimus eligendi maiores libero quidem. Asperiores similique sunt. Possimus eos eos maxime ab. Ducimus quibusdam aliquid eaque ex facere dignissimos. Quos possimus nemo voluptatibus ad et eius. Magni rem quaerat est perferendis.

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