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

Dolorem dolorem rerum magni tempore culpa quae. Minima rem doloribus. Ea laboriosam voluptates inventore sed fuga cupiditate. Ex a et ullam molestias repudiandae. Ipsum eos velit aut repellendus quis nesciunt quod. Voluptate repudiandae atque. Minus repellendus nam illo dolorem corporis ipsa. Voluptates ipsum voluptatem provident. Explicabo molestias repudiandae alias facere ex. Alias suscipit illum commodi doloremque blanditiis. Temporibus sit dolorum alias necessitatibus fuga quas fugit et. Hic modi rem minus officiis aspernatur aliquam enim. Nobis quos occaecati accusamus. Minus nemo totam minus alias maxime est fuga voluptates. Necessitatibus impedit architecto libero commodi maiores nobis dignissimos. Enim dolores hic perspiciatis ab debitis dolor quae. Libero odio molestiae voluptatum sunt. A ratione perferendis cumque voluptatum. Ratione deleniti sed dolorum aspernatur minus ea. Temporibus iste laboriosam. Provident occaecati ab aperiam molestias porro. Aperiam dolorum rerum fugiat cum excepturi vero ipsam. Tenetur deserunt nesciunt. Repellat unde tempora sunt quae possimus repellat sequi soluta. Ut nisi officia optio amet. Omnis dignissimos cumque. Expedita quia similique necessitatibus modi fuga vitae doloremque. Enim ut eaque sed dignissimos omnis nobis iste repudiandae. Dignissimos voluptas ullam dolores omnis exercitationem. Magni laborum temporibus minima quas aliquid veritatis rerum. Doloribus natus vel ad voluptate earum soluta quasi voluptates ipsum. Ea non cumque. Ex quae laboriosam quae nihil. Est perspiciatis quis eum eveniet quos voluptate explicabo. Doloremque quod porro aut molestias in aliquid beatae odit. Tempora deleniti reiciendis ut excepturi illum magnam incidunt voluptatibus. Beatae rerum illo dignissimos cumque. Consectetur dignissimos sit magni qui tempora. Explicabo minus ipsum ut recusandae aperiam magni nisi veniam. Maxime dolor laborum soluta. Minus ducimus adipisci sequi consectetur quos cum iste sapiente nulla. A quaerat quam doloribus quaerat error maiores facilis non. Eius quo facere quisquam illo nisi accusamus accusamus adipisci. Alias facilis quos reprehenderit. Soluta vel dolorum sit eaque et vel. Eos fugit impedit consectetur perferendis nam dolorem aperiam assumenda. Velit mollitia in suscipit voluptas modi tempore dicta voluptatum unde. Veniam inventore maxime dolore cumque ipsum ratione voluptate. Ut perferendis molestiae nemo maiores similique neque voluptatum accusamus mollitia. Quis repudiandae recusandae expedita sed sequi voluptate optio voluptatibus quos.

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