What to include
Include semantic colors, neutral surfaces, typography roles, spacing rhythm, responsive breakpoints, button variants, form states, card density, table rules, and examples of Tailwind classes that match the product.
Template
Tailwind DESIGN.md template
Tailwind projects work best with AI agents when the design file speaks in the same language as the code. A Tailwind DESIGN.md should map brand decisions to classes, CSS variables, semantic color roles, spacing scale, radius, shadows, and component variants.
How agents use it
Cursor, Claude Code, Codex, and other agents can translate DESIGN.md into Tailwind utilities faster when the file names the exact tokens and patterns. That reduces generic UI and keeps generated screens aligned with the product.
Start here
Move from this landing page into deeper DESIGN.md references, examples, and guides.