tailwindlabs/tailwindcss · error · Error

The --spacing(…) function requires an argument, but received

Error message

The --spacing(…) function requires an argument, but received none.

What it means

Thrown by the `--spacing(...)` CSS function handler when no argument was supplied (`!value`). The function multiplies the theme's `--spacing` base by the supplied length, so an empty call like `--spacing()` has nothing to compute. It is the v4 equivalent of the spacing multiplier behind utilities like `p-4`.

Source

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

  }

  if (rest.length > 0) {
    throw new Error(
      `The --alpha(…) function only accepts one argument, e.g.: \`--alpha(${color || 'var(--my-color)'} / ${alpha || '50%'})\``,
    )
  }

  return withAlpha(color, alpha)
}

function spacing(
  designSystem: DesignSystem,
  _source: AstNode,
  value: string,
  ...rest: string[]
): string {
  if (!value) {
    throw new Error(`The --spacing(…) function requires an argument, but received none.`)
  }

  if (rest.length > 0) {
    throw new Error(
      `The --spacing(…) function only accepts a single argument, but received ${rest.length + 1}.`,
    )
  }

  let multiplier = designSystem.theme.resolve(null, ['--spacing'])
  if (!multiplier) {
    throw new Error(
      'The --spacing(…) function requires that the `--spacing` theme variable exists, but it was not found.',
    )
  }

  // Optimization:
  //
  // - We know that at this point the `--spacing` value must be set.

View on GitHub (pinned to 16e94cbf7f)

Solutions

1. Pass a length value, e.g. `--spacing(4)` or `--spacing(1.5rem)`.
2. If the value is dynamic, guard it so an empty/undefined variable is not interpolated into the function.
3. Remember `--spacing(0)` and `--spacing(1)` are optimized specially — they are valid inputs.

Example fix

/* before */
.x { padding: --spacing(); }
/* after */
.x { padding: --spacing(4); }

function assertSpacingArg(inner: string): void {
  if (inner.trim() === '') {
    throw new Error('--spacing requires a length argument');
  }
}

function hasSpacingArgument(inner: string): boolean {
  return inner.trim().length > 0;
}

When it happens

Trigger: Writing `--spacing()` with empty parentheses, or passing a value that trims to an empty string. The first positional arg becomes `value`; if it is falsy the error fires before the multiplier lookup.

Common situations: Typo leaving the parens empty; dynamically generated CSS that interpolates an empty variable into `--spacing(${x})` where `x` is undefined.

Related errors

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

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