Tailwind Utility-First Playground

Click utilities to compose a component. Watch the class="..." string build up and the equivalent plain CSS it generates — that's all Tailwind is.

Compose with utilities

Each utility maps to one tiny CSS rule. You never leave your markup — you describe the design directly on the element.

Background — bg-*

Padding — p-*

Border radius — rounded-*

Shadow — shadow-*

Font weight — font-*

Card

Your markup

Equivalent CSS Tailwind generates

The mental model: a utility = one declaration. p-4 is literally padding: 1rem. You build components by composing many tiny classes — no naming, no separate stylesheet, no context-switching.