{"record":{"id":"ab11a60ba98d5ba1","repo":"tailwindlabs/tailwindcss","slug":"invalid-declaration-buffer-trim","errorCode":null,"errorMessage":"Invalid declaration: `${buffer.trim()}`","messagePattern":"Invalid declaration: `(.+?)`","errorType":"exception","errorClass":"CssSyntaxError","httpStatus":null,"severity":"error","filePath":"packages/tailwindcss/src/css-parser.ts","lineNumber":367,"sourceCode":"    // End of a declaration.\n    //\n    // E.g.:\n    //\n    // ```css\n    // .foo {\n    //   color: red;\n    //             ^\n    // }\n    // ```\n    //\n    else if (\n      currentChar === SEMICOLON &&\n      closingBracketStack[closingBracketStack.length - 1] !== ')'\n    ) {\n      let declaration = parseDeclaration(buffer)\n      if (!declaration) {\n        if (buffer.length === 0) continue\n        throw new CssSyntaxError(\n          `Invalid declaration: \\`${buffer.trim()}\\``,\n          source ? [source, bufferStart, i] : null,\n        )\n      }\n\n      if (source) {\n        declaration.src = [source, bufferStart, i]\n        declaration.dst = [source, bufferStart, i]\n      }\n\n      if (parent) {\n        parent.nodes.push(declaration)\n      } else {\n        ast.push(declaration)\n      }\n\n      buffer = ''\n    }","sourceCodeStart":349,"sourceCodeEnd":385,"githubUrl":"https://github.com/tailwindlabs/tailwindcss/blob/16e94cbf7f965c5ad697e90e940b5e178efad67c/packages/tailwindcss/src/css-parser.ts#L349-L385","documentation":"Thrown by the CSS parser at a top-level semicolon (`;`) when the buffered declaration cannot be parsed by `parseDeclaration(buffer)`. This branch fires for normal (non-custom-property) declarations terminated by `;`. An empty buffer is silently skipped (`buffer.length === 0 continue`), so the error specifically means there is non-empty text that still is not a valid `property: value` pair — e.g. no colon, or a malformed token sequence.","triggerScenarios":"Writing `color red;` (missing colon), `:root;` (stray selector fragment), `12px;` (bare value with no property), or any non-empty token sequence before a `;` that lacks a `prop: value` shape. The closing-bracket stack must not have `)` on top (so semicolons inside parens are not treated as declaration terminators).","commonSituations":"Author typo dropping the colon; malformed nested CSS; copy-paste of a selector where a declaration was expected; broken CSS from a template.","solutions":["Ensure the line is `property: value;`, e.g. `color: red;`.","Remove stray fragments (lone selectors, bare values) that sit where a declaration is expected.","If the text is meant to be a selector or nested rule, move it out of the declaration position or wrap it properly.","Validate the CSS with a linter before feeding it to Tailwind."],"exampleFix":"/* before */\n.x {\n  color red;\n}\n/* after */\n.x {\n  color: red;\n}","handlingStrategy":"validation","validationCode":"// Naive check: every non-empty declaration before ';' must contain a colon\nfunction findColonlessDeclarations(css: string): string[] {\n  const bad: string[] = [];\n  for (const line of css.split(';')) {\n    const trimmed = line.trim();\n    if (trimmed && !trimmed.includes(':') && !trimmed.startsWith('@') && !trimmed.startsWith('{') && !trimmed.startsWith('}')) {\n      bad.push(trimmed);\n    }\n  }\n  return bad;\n}","typeGuard":null,"tryCatchPattern":"try {\n  const ast = CSS.parse(input);\n} catch (e) {\n  if (e instanceof CssSyntaxError && e.message.startsWith('Invalid declaration:')) {\n    // report the buffer text from the message\n  } else throw e;\n}","preventionTips":["Always write property: value;.","Use a CSS formatter that enforces colons.","Lint generated CSS for declarations lacking a colon."],"tags":["tailwind-v4","css-parser","declaration","syntax-error"],"backgroundTag":null,"analyzedSha":"16e94cbf7f965c5ad697e90e940b5e178efad67c","analyzedAt":"2026-08-12T06:02:42.469Z","schemaVersion":2},"datasetVersion":"2026-08-12T13:17:24.610Z"}