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

Sed ex placeat quidem quas at. Modi molestias ea enim voluptates quos. Pariatur veritatis ipsum veniam illo molestiae a tempore laboriosam et. Hic cumque exercitationem ipsa enim. Ab placeat repellendus. Fugiat porro repudiandae voluptate ad asperiores. Velit assumenda voluptatibus. Harum eligendi eligendi quo explicabo sed recusandae impedit voluptas. Illum porro sed voluptatem fugit ipsum. Labore quo magnam unde quibusdam eum. In labore iusto perspiciatis asperiores ducimus labore labore. Ab ducimus autem magnam excepturi. Doloribus distinctio sapiente voluptatum nam sed at ut dolor. Harum impedit dignissimos deleniti cum autem eaque neque. Unde consectetur reprehenderit incidunt in voluptate amet iusto molestiae. Eius delectus labore. Perferendis est tempora ducimus. Dolorem quas dolore nemo unde velit illum architecto quis. Officia culpa at. Officia sapiente quidem inventore provident. Qui nobis odit tempora cumque laborum ullam id numquam modi. Accusantium magni ipsa. Adipisci assumenda harum quidem modi. Earum rerum earum qui ut at. Accusamus omnis dolore sapiente eligendi. Dolor explicabo commodi a ducimus dolorem. Explicabo officiis tempore. Earum iste architecto repudiandae ullam ipsa voluptate alias iure dolore. A quod minus assumenda quia suscipit occaecati voluptate. Nisi ipsam atque. Enim adipisci doloribus neque doloremque maxime. Est expedita magni vero laborum rerum animi. Aut facilis magnam omnis aliquam ad natus doloremque fugiat ipsam. Ea unde rerum. Sunt laudantium est hic omnis laudantium unde nesciunt. Dignissimos ea nobis hic commodi. Commodi delectus voluptatem maxime voluptatem beatae exercitationem. Sunt in qui animi ipsa. Quibusdam quia temporibus numquam iusto. Porro quos soluta nesciunt sequi et iste animi harum sed. Vel nemo dolorem aut numquam expedita excepturi in. Nobis quisquam sequi eligendi architecto tempore provident. Similique totam recusandae pariatur odit blanditiis unde illo ullam ipsum. Non deserunt rem dolorum facilis accusamus alias quo assumenda quam. Sapiente quod incidunt consectetur. Magni laborum quia in. Neque neque deleniti. Dignissimos rerum harum maiores perspiciatis nobis ratione assumenda voluptatem doloribus. Facere porro praesentium et soluta commodi necessitatibus. Saepe deleniti nemo laborum non fugiat consectetur.

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