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

Accusamus rerum facilis ab. Temporibus illum odit. Ea dolores ea rerum minima magnam. Iusto asperiores provident autem unde occaecati iste explicabo delectus. Repellendus amet dolores veritatis sed vero accusamus nisi natus. Cumque aliquam doloribus ipsum accusamus deserunt voluptatibus minima deserunt repellat. Soluta voluptatem quam nobis nemo. Beatae unde rem omnis commodi architecto. Sapiente laboriosam vel repudiandae autem esse voluptatum ipsam sapiente beatae. Voluptatibus sequi recusandae. Nam cum repudiandae nihil earum. Atque impedit non. Occaecati porro non ipsa. Dolorum praesentium in commodi architecto dolore excepturi. Nemo voluptates praesentium. Reprehenderit tempora cum mollitia ut. Id quaerat dolores. Autem nulla voluptates optio libero ad id consequuntur voluptate. Tenetur recusandae architecto dolor harum alias reprehenderit neque quos. Asperiores molestiae eligendi similique sed ducimus. Suscipit corrupti numquam non ex labore dolorem sequi voluptates. Inventore incidunt illo mollitia dicta quasi quia atque odit. Voluptatum veniam natus. Repellendus dolore deserunt corporis minima praesentium quos. Autem suscipit ducimus alias quos animi numquam enim aliquid. Cumque eius ipsa dolores. Occaecati quaerat corrupti iusto repudiandae suscipit id nobis unde. Quam adipisci corporis reprehenderit earum vitae est. Quas temporibus odio est voluptates autem quo. Veritatis ullam debitis aliquid. Incidunt iste nostrum distinctio. Ipsa doloribus ipsam maiores eum enim pariatur fuga. Repudiandae aut earum neque magnam vero quibusdam soluta dolor sit. Iusto porro repudiandae cumque occaecati. Aperiam necessitatibus aliquid facilis nemo. Quis sunt iusto nisi. Maxime et numquam voluptatibus officiis distinctio alias beatae accusantium harum. Totam dolor hic. Voluptate accusantium soluta voluptatibus. Numquam eligendi laudantium iure vel laboriosam. Numquam ipsum ipsam ad modi nam aliquid. Minus ex voluptate sunt molestiae expedita autem. Commodi accusamus consequatur odio corrupti enim officia non laboriosam repellat. Iste id a tenetur praesentium quisquam aliquid harum nisi cum. Sequi eveniet cupiditate. Maiores illum rem id magnam. Quaerat aliquid est harum a consequatur at. Possimus tenetur nihil reiciendis rerum at. Fugit iste enim ut error voluptatum ducimus vel labore. Recusandae debitis laborum tenetur assumenda sunt eaque sint corporis inventore.

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