{"record":{"id":"ddbc142bd3c8fbca","repo":"tailwindlabs/tailwindcss","slug":"the-alpha-function-requires-a-color-and-an-al","errorCode":null,"errorMessage":"The --alpha(…) function requires a color and an alpha value, e.g.: `--alpha(${color || 'var(--my-color)'} / ${alpha || '50%'})`","messagePattern":"The --alpha\\(…\\) function requires a color and an alpha value, e\\.g\\.: `--alpha\\((.+?) / (.+?)\\)`","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/tailwindcss/src/css-functions.ts","lineNumber":29,"sourceCode":"  string,\n  (designSystem: DesignSystem, source: AstNode, ...args: string[]) => string\n> = {\n  '--alpha': alpha,\n  '--spacing': spacing,\n  '--theme': theme,\n  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[]","sourceCodeStart":11,"sourceCodeEnd":47,"githubUrl":"https://github.com/tailwindlabs/tailwindcss/blob/16e94cbf7f965c5ad697e90e940b5e178efad67c/packages/tailwindcss/src/css-functions.ts#L11-L47","documentation":"Thrown by the `--alpha(...)` CSS function handler when the input cannot be split on `/` into both a color and an alpha component. The handler does `segment(value, '/')` and trims both halves; if either half is empty the function cannot compute `withAlpha(color, alpha)` and rejects the call. `--alpha` is a v4 replacement for the old `theme(... alpha(...))` pattern and expects exactly `--alpha(<color> / <alpha>)`.","triggerScenarios":"Writing `--alpha(var(--my-color))` (no slash or alpha), `--alpha(/ 50%)` (missing color), `--alpha(red /)` (slash present but empty alpha after trim), or `--alpha()` (empty). The split yields only one segment or an empty second segment.","commonSituations":"Forgetting the slash separator when migrating from `rgba()`; passing a CSS variable that resolves to empty; copy-paste that drops the alpha half; using a comma instead of a slash.","solutions":["Provide both parts separated by ` / `, e.g. `--alpha(var(--my-color) / 50%)` or `--alpha(red / 0.5)`.","If the color or alpha comes from a variable, ensure the variable is non-empty at build time.","Use a percentage (0%–100%) or a number (0–1) for the alpha segment.","Switch to the `color-mix()` CSS function if you need finer control."],"exampleFix":"/* before */\n.btn { color: --alpha(var(--brand)); }\n/* after */\n.btn { color: --alpha(var(--brand) / 50%); }","handlingStrategy":"validation","validationCode":"function isValidAlphaCall(input: string): boolean {\n  const [color, alpha] = input.split('/').map(s => s?.trim() ?? '');\n  return Boolean(color && alpha);\n}\n// Before emitting CSS:\nif (!isValidAlphaCall(rawInner)) {\n  throw new Error(`Refusing to emit --alpha(${rawInner}) — missing color or alpha`);\n}","typeGuard":"function isCompleteAlphaPair(inner: string): boolean {\n  const parts = inner.split('/');\n  return parts.length === 2 && parts[0].trim() !== '' && parts[1].trim() !== '';\n}","tryCatchPattern":null,"preventionTips":["Always write --alpha(color / alpha) with the slash.","When interpolating variables, default them: --alpha(${color || 'black'} / ${alpha || '50%'}).","Lint CSS for --alpha( calls that lack a slash."],"tags":["tailwind-v4","css-function","alpha","theme","color"],"backgroundTag":null,"analyzedSha":"16e94cbf7f965c5ad697e90e940b5e178efad67c","analyzedAt":"2026-08-12T06:02:42.469Z","schemaVersion":2},"datasetVersion":"2026-08-12T13:17:24.610Z"}