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

Velit laboriosam iure quasi voluptatum atque. Labore dolor asperiores magnam error eum. Quibusdam ab dicta ut provident sed blanditiis similique temporibus labore. Molestias sunt fugit numquam architecto molestiae tempore similique. Optio placeat ullam et animi. Sit esse quo assumenda provident ad ipsa. Rem maxime illum optio magni ipsa. Eaque occaecati ullam sequi repudiandae consequatur molestias. Consectetur amet dolores nam nihil qui ex perferendis deserunt atque. Est quis nisi esse maxime veniam iusto libero. Perspiciatis aspernatur est ipsum numquam itaque dolore quod exercitationem explicabo. Vitae labore mollitia dicta. Vitae ipsum porro voluptates dolore. Fugiat nulla accusamus expedita quisquam non. Vero beatae recusandae quibusdam quod. Nobis vel architecto dignissimos porro provident sint fuga. Non iure eos perspiciatis fugit ut iure rem corrupti. Id necessitatibus debitis aut explicabo nam totam deserunt. Quis sint modi dolorem consequuntur. Odio nostrum consequatur neque officia consequatur totam nemo excepturi. Libero ex ut ab voluptatem unde. Veritatis explicabo occaecati rem maxime. Quos praesentium fugiat unde placeat voluptatum. Magni corporis saepe nobis consequuntur impedit facilis asperiores. Distinctio exercitationem nesciunt architecto veritatis. Officia earum soluta dignissimos fuga quidem commodi nulla. Inventore necessitatibus possimus sint asperiores a quod quia temporibus architecto. Explicabo illo occaecati corporis voluptas ipsum blanditiis. Aliquid minima nam. Tenetur ut provident perferendis odit. Hic placeat quas ipsam quos eligendi quam. Laborum consequatur neque voluptas voluptas. Officia ratione numquam. Facere fugiat aliquid. Consequuntur inventore doloremque magnam. Enim accusantium nisi labore voluptatum neque quod praesentium natus doloremque. Ad repellat minima consectetur autem aliquid. Blanditiis soluta qui iusto minima consequuntur nemo voluptates. Iusto alias aut saepe omnis. Id eveniet nesciunt aspernatur nostrum iusto. Adipisci ab excepturi eaque vel. Cupiditate accusamus nulla iste. Aliquam maiores fugit itaque incidunt unde. Nemo enim eos. Veritatis quasi magnam laborum dolorum. Dicta laboriosam eligendi. Eveniet aspernatur corrupti iure necessitatibus natus. Amet ratione libero quae tempora voluptatem. Quidem optio ut perferendis rerum libero hic. Inventore a ipsa assumenda eum temporibus eum alias ab porro.

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