tailwindlabs/tailwindcss · error · Error

The --alpha(…) function only accepts one argument, e.g.: `--

Error message

The --alpha(…) function only accepts one argument, e.g.: `--alpha(${color || 'var(--my-color)'} / ${alpha || '50%'})`

What it means

Thrown by the `--alpha(...)` handler when extra arguments beyond the first are present (`rest.length > 0`). The function signature collects trailing args via `...rest`; the only valid form is a single `color / alpha` pair, so any additional comma-separated argument (e.g. `--alpha(red / 50%, extra)`) is rejected. This guards against ambiguous multi-argument calls that `withAlpha` could not interpret.

Source

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

  theme: legacyTheme,
}

function alpha(
  _designSystem: DesignSystem,
  _source: AstNode,
  value: string,
  ...rest: string[]
): string {
  let [color, alpha] = segment(value, '/').map((v) => v.trim())

  if (!color || !alpha) {
    throw new Error(
      `The --alpha(…) function requires a color and an alpha value, e.g.: \`--alpha(${color || 'var(--my-color)'} / ${alpha || '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) {

View on GitHub (pinned to 16e94cbf7f)

Solutions

1. Reduce the call to exactly one argument of the form `color / alpha` and remove any extra comma-separated parameters.
2. If you need a fallback, wrap with `var(--alpha(...) , fallback)` at the CSS level instead of adding args inside `--alpha`.
3. For mixing multiple colors use `color-mix(in srgb, red, blue)` instead.

Example fix

/* before */
.x { color: --alpha(red / 50%, blue); }
/* after */
.x { color: --alpha(red / 50%); }

function alphaArgCount(inner: string): number {
  // Top-level comma count + 1 (naive; use a real parser for nested parens)
  return inner.split(',').length;
}
if (alphaArgCount(rawInner) > 1) {
  throw new Error('--alpha accepts a single color/alpha pair');
}

function isSingleAlphaArgument(inner: string): boolean {
  return inner.split(',').length === 1;
}

When it happens

Trigger: Calling `--alpha(red / 50%, blue)`, `--alpha(var(--c) / 50%, fallback)`, or any form where the function parser splits more than one top-level argument. The first arg is `value` (the `color / alpha`), everything after is `rest`.

Common situations: Confusing `--alpha` with `color-mix` (which takes multiple colors); attempting to pass a fallback value the way `var()` does; trailing comma typos.

Related errors

• The --alpha(…) function requires a color and an alpha value,
• The --spacing(…) function only accepts a single argument, bu
• 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/efc31623053ac44c. Report an issue: GitHub.