{"record":{"id":"971bbc1af85444c7","repo":"tailwindlabs/tailwindcss","slug":"could-not-resolve-value-for-theme-function-theme-971bbc","errorCode":null,"errorMessage":"Could not resolve value for theme function: `theme(${path})`. Consider checking if the path is correct or provide a fallback value to silence this error.","messagePattern":"Could not resolve value for theme function: `theme\\((.+?)\\)`\\. Consider checking if the path 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":163,"sourceCode":"  return resolvedValue\n}\n\nfunction legacyTheme(\n  designSystem: DesignSystem,\n  _source: AstNode,\n  path: string,\n  ...fallback: string[]\n): string {\n  path = eventuallyUnquote(path)\n\n  let resolvedValue = designSystem.resolveThemeValue(path)\n\n  if (!resolvedValue && fallback.length > 0) {\n    return fallback.join(', ')\n  }\n\n  if (!resolvedValue) {\n    throw new Error(\n      `Could not resolve value for theme function: \\`theme(${path})\\`. Consider checking if the path is correct or provide a fallback value to silence this error.`,\n    )\n  }\n\n  return resolvedValue\n}\n\nexport const THEME_FUNCTION_INVOCATION = new RegExp(\n  Object.keys(CSS_FUNCTIONS)\n    .map((x) => `${x}\\\\(`)\n    .join('|'),\n)\n\nexport function substituteFunctions(ast: AstNode[], designSystem: DesignSystem) {\n  let features = Features.None\n  walk(ast, (node) => {\n    // Find all declaration values\n    if (node.kind === 'declaration' && node.value && THEME_FUNCTION_INVOCATION.test(node.value)) {","sourceCodeStart":145,"sourceCodeEnd":181,"githubUrl":"https://github.com/tailwindlabs/tailwindcss/blob/16e94cbf7f965c5ad697e90e940b5e178efad67c/packages/tailwindcss/src/css-functions.ts#L145-L181","documentation":"Thrown by the legacy `theme(...)` handler (kept for backward compatibility) when `resolveThemeValue(path)` returns falsy and no fallback was given. Unlike the v4 `--theme` handler this one accepts dotted legacy paths (e.g. `theme(colors.red.500)`) and unquotes the path first via `eventuallyUnquote`. It is the runtime backing for any `theme(...)` call that appears in your CSS.","triggerScenarios":"Writing `theme(colors.brand.500)` for a color that does not exist; referencing `theme(fontFamily.display)` when only the default font families are registered; typos in the dotted path; referencing a namespace removed via `theme: { extend: { ... } }` overrides.","commonSituations":"Carrying v3 `theme()` calls into v4 where the default theme structure changed; clearing a default theme namespace but keeping a `theme(...)` reference to it; renaming keys in config.","solutions":["Confirm the dotted path matches an existing theme key; correct spelling and casing.","Add a fallback argument: `theme(colors.brand.500, #3b82f6)`.","Prefer the v4 `--theme(--color-brand-500)` form for new code.","If a default namespace was cleared, remove stale `theme(...)` references to it."],"exampleFix":"/* before */\n.x { color: theme(colors.brand.500); }\n/* after */\n.x { color: theme(colors.brand.500, #3b82f6); }","handlingStrategy":"fallback","validationCode":"// Always pass a fallback to the legacy theme() function\n// theme(colors.brand.500, #3b82f6)\nfunction safeLegacyThemeCall(path: string, fallback: string): string {\n  return `theme(${path}, ${fallback})`;\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Add a fallback argument to every theme() call.","Prefer the v4 --theme(--var) form for new code.","Validate dotted paths against your theme namespace before shipping."],"tags":["tailwind-v4","css-function","theme","legacy","resolution"],"backgroundTag":null,"analyzedSha":"16e94cbf7f965c5ad697e90e940b5e178efad67c","analyzedAt":"2026-08-12T06:02:42.469Z","schemaVersion":2},"datasetVersion":"2026-08-12T13:17:24.610Z"}