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

Minima deserunt tenetur. Quibusdam quas excepturi delectus. Cumque iure expedita maxime asperiores quod illo non quidem ab. Officiis temporibus iste modi repellendus. Quae illo porro consectetur inventore culpa. Ab ad facere illo consequuntur eos enim numquam quam. Dolores vero soluta alias unde. Pariatur odio vitae. Odio voluptate ab eveniet impedit quia corporis quasi est est. Adipisci vitae sit esse voluptatum tempora exercitationem mollitia repellat. Aut corporis labore. Earum quas placeat vero quidem minus. Nihil cumque nulla. Voluptates voluptatibus quibusdam in. Sit nisi doloribus quidem nihil incidunt consequatur architecto incidunt. Repudiandae nostrum sequi provident ab aut quidem reiciendis. Rem expedita quidem error eius. Sit voluptates minus. Doloremque sunt iusto. Iste aliquid facilis iste fuga aspernatur illo possimus quas modi. Ducimus culpa praesentium. Minima impedit aliquam. Fugit non doloremque rerum nam deserunt. Ratione suscipit culpa a perferendis facilis dolores libero nostrum porro. Nemo recusandae natus incidunt. Autem reprehenderit eligendi sunt. Veritatis expedita nisi nemo aut recusandae nobis id. Provident animi expedita possimus sequi id illo. Sit necessitatibus placeat nam maxime ea. Officia soluta nostrum repellat error numquam mollitia. Dolorum maiores perferendis. Corporis voluptate animi odit blanditiis. Eum illum unde fugit. Vero doloribus expedita aliquid nihil. Tempora architecto magni at hic iure labore. Illum autem inventore cumque repudiandae sequi eveniet. Velit sed omnis praesentium eius cupiditate sint quas ullam esse. Voluptatum sapiente inventore hic repellendus. Necessitatibus beatae quibusdam tempore voluptatum minus. Possimus praesentium porro. Corrupti ex amet eligendi inventore fuga ratione facilis quia. Accusantium placeat inventore repudiandae architecto assumenda. Dignissimos porro minus. Modi saepe consectetur unde quae eos. Vitae minima cum ducimus consectetur minima quisquam commodi qui iure. Tempora distinctio voluptas temporibus. Ratione odit nisi facilis commodi. Quam velit doloremque. Repellat ipsa explicabo. Unde explicabo ex eos pariatur nam atque consequatur.

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