Docs

Composition & conflicts

How @references and tailwind-merge interact.

Composition & conflicts

When a recipe references another recipe, Shortwind flattens the tokens in order. Later tokens win — that's the same rule Tailwind uses.

@recipe card { rounded-lg border bg-white p-4 }
@recipe card-tight { @card p-2 }

@card-tight expands to rounded-lg border bg-white p-2. The p-4 from @card is shadowed by the p-2 that came after it.

tailwind-merge

Shortwind runs the flattened token list through tailwind-merge before emitting HTML. That handles the gnarly cases — bg-red-500 bg-blue-500 collapses to bg-blue-500, variants are respected, arbitrary values too.

Cycles and duplicates

Recipe resolution is a two-pass DAG walk. The resolver catches:

  • Cycles (@a@b@a).
  • Unknown references.
  • Duplicate recipe names across files.

Each is reported as a structured diagnostic with file + line. The CLI's shortwind lint surfaces them.