{"record":{"id":"13ce49e5559639ca","repo":"tailwindlabs/tailwindcss","slug":"could-not-resolve-value-for-theme-function-theme","errorCode":null,"errorMessage":"Could not resolve value for theme function: `theme(${path})`. Consider checking if the variable name is correct or provide a fallback value to silence this error.","messagePattern":"Could not resolve value for theme function: `theme\\((.+?)\\)`\\. Consider checking if the variable name is correct or provide a fallback value to silence this error\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/tailwindcss/src/css-functions.ts","lineNumber":115,"sourceCode":"  let inline = false\n\n  // Handle `--theme(… inline)` to force inline resolution\n  if (path.endsWith(' inline')) {\n    inline = true\n    path = path.slice(0, -7)\n  }\n\n  // If the `--theme(…)` function is used within an at-rule (e.g. `@media (width >= --theme(…)))`,\n  // we have to always inline the result since CSS does not support CSS variables in these positions\n  if (source.kind === 'at-rule') {\n    inline = true\n  }\n\n  let resolvedValue = designSystem.resolveThemeValue(path, inline)\n\n  if (!resolvedValue) {\n    if (fallback.length > 0) return fallback.join(', ')\n    throw new Error(\n      `Could not resolve value for theme function: \\`theme(${path})\\`. Consider checking if the variable name is correct or provide a fallback value to silence this error.`,\n    )\n  }\n\n  if (fallback.length === 0) {\n    return resolvedValue\n  }\n\n  let joinedFallback = fallback.join(', ')\n  if (joinedFallback === 'initial') return resolvedValue\n\n  // When the resolved value returns `initial`, resolve with the fallback value\n  if (resolvedValue === 'initial') return joinedFallback\n\n  // Inject the fallback of a `--theme(…)` function into the fallback of a referenced `--theme(…)`\n  // function or `var(…)` declaration. If the referenced function already defines a fallback, we use\n  // a potential fallback value of `initial` in the referenced function to determine if we should\n  // inject the fallback value of the caller. If that's not the case, we keep the fallback as-is","sourceCodeStart":97,"sourceCodeEnd":133,"githubUrl":"https://github.com/tailwindlabs/tailwindcss/blob/16e94cbf7f965c5ad697e90e940b5e178efad67c/packages/tailwindcss/src/css-functions.ts#L97-L133","documentation":"Thrown by the v4 `--theme(...)` handler when `designSystem.resolveThemeValue(path, inline)` returns a falsy value and no fallback argument was supplied. The function first checks for a fallback (`fallback.length > 0`) and returns it silently; only if there is no fallback does it throw. This is the hard-failure mode for an unknown theme variable.","triggerScenarios":"Writing `--theme(--color-does-not-exist)` with no fallback; renaming or removing a theme variable but still referencing the old name; typos in the variable name; referencing a variable defined in a different namespace that was not registered.","commonSituations":"Upgrading Tailwind and finding a default variable was renamed (v3 → v4 renamed many scales); disabling parts of the default theme with `--color-*: initial` but still referencing a cleared variable; typos.","solutions":["Verify the variable exists in your `@theme` block or the default theme; correct the name.","Supply a fallback so resolution never hard-fails: `--theme(--maybe-missing, #f00)`.","If you intentionally cleared a default namespace, remove references to its variables from your CSS.","Check the v4 upgrade guide for renamed variables (e.g. `--colors-*` → `--color-*`)."],"exampleFix":"/* before */\n.x { color: --theme(--color-brand-500); }\n/* after */\n.x { color: --theme(--color-brand-500, #3b82f6); }","handlingStrategy":"fallback","validationCode":"// Always pass a fallback to --theme so resolution never hard-fails\n// --theme(--color-brand-500, #3b82f6)\nfunction safeThemeCall(path: string, fallback: string): string {\n  return `--theme(${path}, ${fallback})`;\n}","typeGuard":"function themePathLooksValid(path: string): boolean {\n  return path.startsWith('--') && /^--[a-zA-Z][\\w-]*$/.test(path);\n}","tryCatchPattern":null,"preventionTips":["Supply a fallback as the second argument to --theme.","Cross-check variable names against your @theme block.","After upgrading, grep for --theme( references to renamed variables."],"tags":["tailwind-v4","css-function","theme","resolution","fallback"],"backgroundTag":null,"analyzedSha":"16e94cbf7f965c5ad697e90e940b5e178efad67c","analyzedAt":"2026-08-12T06:02:42.469Z","schemaVersion":2},"datasetVersion":"2026-08-12T13:17:24.610Z"}