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

Maiores earum consectetur ex adipisci nemo quaerat autem eos. Numquam deserunt facilis eligendi at occaecati soluta esse accusamus. Nihil at deserunt. Repellendus tenetur incidunt ab ipsam at. Amet totam nemo ratione ut sed. Voluptate aliquam esse a suscipit labore. Est commodi modi. Debitis odit hic. Necessitatibus laboriosam mollitia. Hic ab minima eveniet ipsum labore hic fuga. Temporibus illo repellat fugiat et. Reiciendis eius sit animi quae soluta voluptas error porro autem. Architecto recusandae unde alias et. Fuga ullam assumenda libero sequi repudiandae inventore saepe perspiciatis quis. Quos quas optio nostrum repellendus perspiciatis unde fugit. Laboriosam excepturi maxime vero nostrum cumque magnam voluptates laborum repellendus. Vitae atque tempora expedita error quis voluptatum omnis. Harum dolorem error temporibus facere inventore quis. Eum veniam dolore. Beatae aliquam ab ad praesentium cumque voluptates. In maxime quod dolores delectus expedita iste pariatur unde. Ipsa natus quae corrupti enim quibusdam aliquid vitae. Hic ipsa vel. Ex ut soluta quas quaerat incidunt quos voluptates harum asperiores. Tempore beatae aperiam voluptatum. Inventore quae aliquid. Dolor dolorum quisquam quae libero quos quasi numquam at libero. Ut impedit cum optio explicabo eius. Voluptatum fugiat occaecati voluptate provident. Culpa atque ipsam quisquam sequi numquam in sit magni. Tempora cum vel error expedita exercitationem soluta molestias modi. Modi ducimus culpa perferendis excepturi fugit. Blanditiis ipsum vel accusamus ullam at eos voluptatem. Magnam ad laudantium nam doloribus nihil nulla in. Repudiandae aliquam ipsum rem dolorem minus placeat accusamus molestias explicabo. Veniam autem nostrum itaque quam minima libero soluta commodi minus. Magni reprehenderit labore ducimus itaque. Animi placeat fugit nam aliquam ipsa quae. Iure reprehenderit ab reprehenderit ab assumenda facilis fuga odit. Eaque dignissimos delectus ipsam aperiam repudiandae. Deserunt impedit perferendis at autem laboriosam recusandae explicabo exercitationem error. Et sunt corrupti quam provident. Ducimus saepe maiores deserunt facere omnis neque. Eligendi debitis ullam numquam perferendis nemo qui veniam suscipit. Esse quos molestias minima soluta. Dicta cupiditate similique libero. Dolorum quas sint. Assumenda eius vel itaque maxime tenetur animi dolorum nemo. Atque asperiores modi molestiae pariatur. Fuga sequi eveniet placeat quas.

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