{"record":{"id":"efc31623053ac44c","repo":"tailwindlabs/tailwindcss","slug":"the-alpha-function-only-accepts-one-argument","errorCode":null,"errorMessage":"The --alpha(…) function only accepts one argument, e.g.: `--alpha(${color || 'var(--my-color)'} / ${alpha || '50%'})`","messagePattern":"The --alpha\\(…\\) function only accepts one argument, e\\.g\\.: `--alpha\\((.+?) / (.+?)\\)`","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/tailwindcss/src/css-functions.ts","lineNumber":35,"sourceCode":"  theme: legacyTheme,\n}\n\nfunction alpha(\n  _designSystem: DesignSystem,\n  _source: AstNode,\n  value: string,\n  ...rest: string[]\n): string {\n  let [color, alpha] = segment(value, '/').map((v) => v.trim())\n\n  if (!color || !alpha) {\n    throw new Error(\n      `The --alpha(…) function requires a color and an alpha value, e.g.: \\`--alpha(${color || 'var(--my-color)'} / ${alpha || '50%'})\\``,\n    )\n  }\n\n  if (rest.length > 0) {\n    throw new Error(\n      `The --alpha(…) function only accepts one argument, e.g.: \\`--alpha(${color || 'var(--my-color)'} / ${alpha || '50%'})\\``,\n    )\n  }\n\n  return withAlpha(color, alpha)\n}\n\nfunction spacing(\n  designSystem: DesignSystem,\n  _source: AstNode,\n  value: string,\n  ...rest: string[]\n): string {\n  if (!value) {\n    throw new Error(`The --spacing(…) function requires an argument, but received none.`)\n  }\n\n  if (rest.length > 0) {","sourceCodeStart":17,"sourceCodeEnd":53,"githubUrl":"https://github.com/tailwindlabs/tailwindcss/blob/16e94cbf7f965c5ad697e90e940b5e178efad67c/packages/tailwindcss/src/css-functions.ts#L17-L53","documentation":"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.","triggerScenarios":"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`.","commonSituations":"Confusing `--alpha` with `color-mix` (which takes multiple colors); attempting to pass a fallback value the way `var()` does; trailing comma typos.","solutions":["Reduce the call to exactly one argument of the form `color / alpha` and remove any extra comma-separated parameters.","If you need a fallback, wrap with `var(--alpha(...) , fallback)` at the CSS level instead of adding args inside `--alpha`.","For mixing multiple colors use `color-mix(in srgb, red, blue)` instead."],"exampleFix":"/* before */\n.x { color: --alpha(red / 50%, blue); }\n/* after */\n.x { color: --alpha(red / 50%); }","handlingStrategy":"validation","validationCode":"function alphaArgCount(inner: string): number {\n  // Top-level comma count + 1 (naive; use a real parser for nested parens)\n  return inner.split(',').length;\n}\nif (alphaArgCount(rawInner) > 1) {\n  throw new Error('--alpha accepts a single color/alpha pair');\n}","typeGuard":"function isSingleAlphaArgument(inner: string): boolean {\n  return inner.split(',').length === 1;\n}","tryCatchPattern":null,"preventionTips":["Never pass extra comma-separated args to --alpha.","Use var() wrapping for fallbacks, not extra args.","Use color-mix() for multi-color blending."],"tags":["tailwind-v4","css-function","alpha","argument-error"],"backgroundTag":null,"analyzedSha":"16e94cbf7f965c5ad697e90e940b5e178efad67c","analyzedAt":"2026-08-12T06:02:42.469Z","schemaVersion":2},"datasetVersion":"2026-08-12T13:17:24.610Z"}