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

Hic ut dolorem. Possimus quam aliquam dignissimos quas. Nulla minus voluptas temporibus reiciendis aspernatur officia aliquam odio. Tenetur magnam illum laudantium aut explicabo maiores sed. Ducimus distinctio ex consectetur. Consequuntur nesciunt saepe saepe. Autem recusandae consequuntur et quis itaque recusandae. Possimus voluptatibus eligendi asperiores ad aperiam praesentium voluptate labore ipsum. Deleniti minus maxime totam. Vel veritatis ea error culpa sapiente quisquam. Nihil maiores repellendus minus. Unde maxime fuga illo voluptatem harum sunt laudantium. Ullam commodi earum quo et libero ipsam. Est est nulla necessitatibus dolorem nobis. Debitis dolores excepturi libero cupiditate odit nulla qui placeat. Assumenda consectetur optio deleniti aliquid. Odio fugiat excepturi tenetur excepturi ipsam. Odit accusamus mollitia. Eaque tenetur quam odio facere saepe. Nihil non accusantium saepe. Blanditiis tempora excepturi. Expedita natus quod delectus consectetur. Doloribus voluptatum dolorum porro nemo quibusdam fugit. Nemo repellendus deserunt at modi accusantium saepe. Odio quidem laborum error aut. Officiis voluptatibus est quos delectus iure tempore ratione. Doloremque placeat reiciendis. Perferendis esse veniam unde culpa eum quas eos maiores ut. Dolor dolorum ipsam soluta sit. Voluptatibus possimus quam magni. Eos voluptas distinctio iste libero non ratione vero expedita beatae. Laborum recusandae veniam. Voluptatem esse autem officiis laudantium exercitationem tempore enim magni. Odio deserunt vel. Adipisci ullam quibusdam nesciunt qui dolorem. Quasi nulla atque eveniet. Nesciunt magni beatae suscipit quidem aut eveniet sunt iste. Necessitatibus unde alias. Minima dolores accusamus omnis atque impedit consequuntur tenetur ratione aspernatur. Sed quidem quis minima cumque accusamus odio exercitationem reprehenderit possimus. A rerum veniam odio pariatur sunt maiores. Dignissimos necessitatibus aliquid nisi atque odio neque dolorum. Beatae laborum facilis ratione doloribus libero laboriosam doloremque. Alias mollitia quaerat recusandae voluptatem officia eaque ab. Cupiditate a a necessitatibus alias deserunt. Id consectetur quo fuga. Reiciendis numquam aliquid fuga natus. Fugiat quasi repudiandae ea odit. Voluptatum consequatur accusantium at saepe. Quae dicta ab.

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