tailwindlabs/tailwindcss · error · Error

Could not resolve value for theme function: `theme(${path})`

Error message

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.

What it means

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.

Source

Thrown at packages/tailwindcss/src/css-functions.ts:163

  return resolvedValue
}

function legacyTheme(
  designSystem: DesignSystem,
  _source: AstNode,
  path: string,
  ...fallback: string[]
): string {
  path = eventuallyUnquote(path)

  let resolvedValue = designSystem.resolveThemeValue(path)

  if (!resolvedValue && fallback.length > 0) {
    return fallback.join(', ')
  }

  if (!resolvedValue) {
    throw new Error(
      `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.`,
    )
  }

  return resolvedValue
}

export const THEME_FUNCTION_INVOCATION = new RegExp(
  Object.keys(CSS_FUNCTIONS)
    .map((x) => `${x}\\(`)
    .join('|'),
)

export function substituteFunctions(ast: AstNode[], designSystem: DesignSystem) {
  let features = Features.None
  walk(ast, (node) => {
    // Find all declaration values
    if (node.kind === 'declaration' && node.value && THEME_FUNCTION_INVOCATION.test(node.value)) {

View on GitHub (pinned to 16e94cbf7f)

Solutions

1. Confirm the dotted path matches an existing theme key; correct spelling and casing.
2. Add a fallback argument: `theme(colors.brand.500, #3b82f6)`.
3. Prefer the v4 `--theme(--color-brand-500)` form for new code.
4. If a default namespace was cleared, remove stale `theme(...)` references to it.

Example fix

/* before */
.x { color: theme(colors.brand.500); }
/* after */
.x { color: theme(colors.brand.500, #3b82f6); }

// Always pass a fallback to the legacy theme() function
// theme(colors.brand.500, #3b82f6)
function safeLegacyThemeCall(path: string, fallback: string): string {
  return `theme(${path}, ${fallback})`;
}

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• Could not resolve value for theme function: `theme(${path})`
• The --alpha(…) function requires a color and an alpha value,
• The --spacing(…) function requires an argument, but received
• The --spacing(…) function requires that the `--spacing` them
• The --theme(…) function can only be used with CSS variables

AI-assisted analysis of tailwindlabs/tailwindcss@16e94cbf7f (2026-08-12). Data as JSON: /api/errors/971bbc1af85444c7. Report an issue: GitHub.