{"record":{"id":"a70fd8b2ac541d00","repo":"tailwindlabs/tailwindcss","slug":"cannot-apply-utility-class-candidate-because-a70fd8","errorCode":null,"errorMessage":"Cannot apply utility class `${candidate}` because the ${unknownVariants.join(', ')} variants do not exist.","messagePattern":"Cannot apply utility class `(.+?)` because the (.+?) variants do not exist\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/tailwindcss/src/apply.ts","lineNumber":263,"sourceCode":"\n              // Ensure utility on its own compiles, if not, we will fallback to\n              // the next error\n              if (designSystem.candidatesToCss([utility])[0]) {\n                let compiledVariants = designSystem.candidatesToCss(\n                  parts.map((variant) => `${variant}:[--tw-variant-check:1]`),\n                )\n                let unknownVariants = parts.filter((_, idx) => compiledVariants[idx] === null)\n                if (unknownVariants.length > 0) {\n                  if (unknownVariants.length === 1) {\n                    throw new Error(\n                      `Cannot apply utility class \\`${candidate}\\` because the ${unknownVariants.map((variant) => `\\`${variant}\\``)} variant does not exist.`,\n                    )\n                  } else {\n                    let formatter = new Intl.ListFormat('en', {\n                      style: 'long',\n                      type: 'conjunction',\n                    })\n                    throw new Error(\n                      `Cannot apply utility class \\`${candidate}\\` because the ${formatter.format(unknownVariants.map((variant) => `\\`${variant}\\``))} variants do not exist.`,\n                    )\n                  }\n                }\n              }\n            }\n\n            // When the theme is empty, it means that no theme was loaded and\n            // `@import \"tailwindcss\"`, `@reference \"app.css\"` or similar is\n            // very likely missing.\n            if (designSystem.theme.size === 0) {\n              throw new Error(\n                `Cannot apply unknown utility class \\`${candidate}\\`. Are you using CSS modules or similar and missing \\`@reference\\`? https://tailwindcss.com/docs/functions-and-directives#reference-directive`,\n              )\n            }\n\n            // Fallback to most generic error message\n            throw new Error(`Cannot apply unknown utility class \\`${candidate}\\``)","sourceCodeStart":245,"sourceCodeEnd":281,"githubUrl":"https://github.com/tailwindlabs/tailwindcss/blob/16e94cbf7f965c5ad697e90e940b5e178efad67c/packages/tailwindcss/src/apply.ts#L245-L281","documentation":"Same variant-existence check as the single-variant case, but for two or more unknown variants. Uses `Intl.ListFormat` (conjunction style) to render the missing variants in a human-readable list. Thrown when `unknownVariants.length > 1`.","triggerScenarios":"Writing `@apply hovar:focs:bg-red-500` where multiple variant segments fail the `[--tw-variant-check:1]` probe. Each variant that compiles to `null` is collected and listed.","commonSituations":"Stacking multiple typos; using a chain of custom variants none of which are registered; copy-pasting a variant chain from a different Tailwind setup.","solutions":["Fix each misspelled variant in the chain (cross-reference the listed names against your configured variants).","Register the missing custom variants with `addVariant` before using them in `@apply`.","Simplify the chain to only variants you have confirmed exist."],"exampleFix":"// before\n.x { @apply hovar:focs:bg-red-500; }\n// after\n.x { @apply hover:focus:bg-red-500; }","handlingStrategy":"validation","validationCode":"function unknownVariants(designSystem, candidate) {\n  const parts = candidate.split(':');\n  const util = parts.pop();\n  if (!designSystem.candidatesToCss([util])[0]) return [];\n  const probes = designSystem.candidatesToCss(parts.map(v => `${v}:[--tw-variant-check:1]`));\n  return parts.filter((_, i) => probes[i] === null);\n}\n// const missing = unknownVariants(designSystem, 'hovar:focs:bg-red-500');","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Validate full variant chains in unit tests for component CSS.","Use editor autocomplete for variant names from the Tailwind LSP."],"tags":["tailwind","apply","variant","typo"],"backgroundTag":null,"analyzedSha":"16e94cbf7f965c5ad697e90e940b5e178efad67c","analyzedAt":"2026-08-12T06:02:42.469Z","schemaVersion":2},"datasetVersion":"2026-08-12T13:17:24.610Z"}