What is Tailwind DESIGN.md?

Tailwind DESIGN.md is a plain-text design contract for utility-class projects — spacing scale, radius, semantic colors, dark mode and component tone — so agents stop generating default Tailwind UI.

How is DESIGN.md different from tailwind.config?

tailwind.config defines tokens and plugins. DESIGN.md tells the agent how to apply those tokens in product UI: card density, table rhythm, button tone and which utility patterns are mandatory.

Can I use Tailwind DESIGN.md with Next.js templates?

Yes. Most DesignMD template kits ship Tailwind tokens plus DESIGN.md. Start from a Next.js kit for source code or copy a Tailwind reference for agent rules only.

Where is the full Tailwind CSS reference?

The copyable Tailwind CSS DESIGN.md reference lives at /p/designmd-for-tailwind with tokens, spacing, radius and component tone for Cursor, Claude Code, Codex and v0.

Tailwind

Tailwind CSS DESIGN.md templates and references

Copyable Tailwind DESIGN.md files and Next.js kits with tokens — so utility-class UI stops looking like the default starter when agents generate components.

42 entries

What belongs in Tailwind DESIGN.md

Tailwind DESIGN.md should define spacing rhythm, radius scale, semantic color usage, dark mode behavior and component tone — not just list utility classes.

Agents need explicit rules for card padding, table density, form spacing and when to use border vs shadow. Without that, every screen drifts toward generic gray UI.

Templates vs references

Use a Tailwind reference or template scaffold when you only need agent rules. Use a Next.js kit when you want runnable source, tokens export and dashboard routes that already follow the same DESIGN.md.

Templates