tailwindlabs/tailwindcss · error · Error

Cannot apply utility class `${candidate}` because the ${unkn

Error message

Cannot apply utility class `${candidate}` because the ${unknownVariants.join(', ')} variants do not exist.

What it means

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`.

Source

Thrown at packages/tailwindcss/src/apply.ts:263

              // Ensure utility on its own compiles, if not, we will fallback to
              // the next error
              if (designSystem.candidatesToCss([utility])[0]) {
                let compiledVariants = designSystem.candidatesToCss(
                  parts.map((variant) => `${variant}:[--tw-variant-check:1]`),
                )
                let unknownVariants = parts.filter((_, idx) => compiledVariants[idx] === null)
                if (unknownVariants.length > 0) {
                  if (unknownVariants.length === 1) {
                    throw new Error(
                      `Cannot apply utility class \`${candidate}\` because the ${unknownVariants.map((variant) => `\`${variant}\``)} variant does not exist.`,
                    )
                  } else {
                    let formatter = new Intl.ListFormat('en', {
                      style: 'long',
                      type: 'conjunction',
                    })
                    throw new Error(
                      `Cannot apply utility class \`${candidate}\` because the ${formatter.format(unknownVariants.map((variant) => `\`${variant}\``))} variants do not exist.`,
                    )
                  }
                }
              }
            }

            // When the theme is empty, it means that no theme was loaded and
            // `@import "tailwindcss"`, `@reference "app.css"` or similar is
            // very likely missing.
            if (designSystem.theme.size === 0) {
              throw new Error(
                `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`,
              )
            }

            // Fallback to most generic error message
            throw new Error(`Cannot apply unknown utility class \`${candidate}\``)

View on GitHub (pinned to 16e94cbf7f)

Solutions

1. Fix each misspelled variant in the chain (cross-reference the listed names against your configured variants).
2. Register the missing custom variants with `addVariant` before using them in `@apply`.
3. Simplify the chain to only variants you have confirmed exist.

Example fix

// before
.x { @apply hovar:focs:bg-red-500; }
// after
.x { @apply hover:focus:bg-red-500; }

function unknownVariants(designSystem, candidate) {
  const parts = candidate.split(':');
  const util = parts.pop();
  if (!designSystem.candidatesToCss([util])[0]) return [];
  const probes = designSystem.candidatesToCss(parts.map(v => `${v}:[--tw-variant-check:1]`));
  return parts.filter((_, i) => probes[i] === null);
}
// const missing = unknownVariants(designSystem, 'hovar:focs:bg-red-500');

When it happens

Trigger: 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.

Common situations: Stacking multiple typos; using a chain of custom variants none of which are registered; copy-pasting a variant chain from a different Tailwind setup.

Related errors

• Cannot apply utility class `${candidate}` because the `${unk
• The rule `@apply ${list}` must not have a body.
• Cannot apply unprefixed utility class `${candidate}`. Did yo
• Cannot apply utility class `${candidate}` because it has bee
• Cannot apply unknown utility class `${candidate}`. Are you u

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