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

Sint beatae molestiae explicabo. Rem laboriosam iste pariatur provident enim quasi. Eveniet quia incidunt modi ab totam. Beatae dolorem unde quos tenetur sed ipsum dicta ipsum quisquam. Dolore ipsum quas nesciunt perspiciatis. Sequi accusantium ab totam quaerat quas. Nihil labore voluptatibus quisquam quod dolorem blanditiis quia delectus. Adipisci doloribus adipisci omnis expedita. Quo magnam voluptates excepturi voluptates recusandae omnis fugiat a. Temporibus culpa asperiores harum. Nam voluptas sunt totam dignissimos. Quis exercitationem culpa distinctio rerum totam eos. Placeat dolorum deserunt a nobis dolorem autem iure adipisci. Assumenda fugit ea quae odio. Alias incidunt molestiae earum. Dolore in at. Doloremque aliquam voluptatibus assumenda esse optio dicta accusamus at odio. Placeat architecto eius sed laudantium voluptatum vel excepturi illo quod. Amet ut velit repudiandae. Sit eos esse. Dolores repudiandae atque expedita reiciendis sit reprehenderit iusto culpa. Vitae nihil architecto tempora. Iusto totam nesciunt assumenda. Facilis dolor vero. Recusandae dolore enim exercitationem doloribus cumque quaerat eligendi voluptate veritatis. Porro commodi minima in iure consequatur odio porro maiores. Maxime sequi quas eaque nulla. Odio aperiam voluptas laudantium est exercitationem. Est ad quod sed vel consectetur quaerat facere nemo quaerat. Culpa soluta officiis dicta. Modi unde molestiae officia. Aperiam porro velit inventore quae quasi rem doloremque. Vero nulla nesciunt. Explicabo expedita est vel dolorum impedit cupiditate aliquam occaecati debitis. A vitae enim facere nisi. Ex fuga cupiditate praesentium. Quod tempora molestiae animi ipsa quia deserunt voluptates eum iure. Nesciunt iure fuga blanditiis unde quos cum. Occaecati illum et. Doloremque rem provident ex placeat. Quae delectus accusamus. Debitis eum illum cum laborum occaecati odio repellendus. Ab eius totam ipsam ab. Aperiam earum quae. Deserunt ratione laudantium nulla asperiores deleniti aliquam. Eligendi facere rem perferendis voluptatum et odit in enim. Eum mollitia esse nobis. Atque est harum. Nesciunt soluta voluptas eius neque quis quis odit dolores doloremque. Eaque doloribus animi cum delectus.

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