tailwindlabs/tailwindcss · error · Error

You cannot `@apply` the `${candidate}` utility here because

Error message

You cannot `@apply` the `${candidate}` utility here because it creates a circular dependency.

What it means

While building the dependency graph for `@utility` ordering, the walker inspects `@apply` rules inside each `@utility`. If a utility's `@apply` references its own root name (after stripping a trailing `-*`), that is a direct self-reference and throws a specific, actionable circular-dependency message. This is the targeted detection before the generic cycle fallback (error 18).

Source

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

        node.kind === 'at-rule' &&
        node.name === '@utility' &&
        next.kind === 'at-rule' &&
        next.name === '@utility'
      ) {
        walk(node.nodes, (child) => {
          if (child.kind !== 'at-rule' || child.name !== '@apply') return

          let candidates = child.params.split(/\s+/g)
          for (let candidate of candidates) {
            for (let candidateAstNode of designSystem.parseCandidate(candidate)) {
              switch (candidateAstNode.kind) {
                case 'arbitrary':
                  break

                case 'static':
                case 'functional':
                  if (next.params.replace(/-\*$/, '') === candidateAstNode.root) {
                    throw new Error(
                      `You cannot \`@apply\` the \`${candidate}\` utility here because it creates a circular dependency.`,
                    )
                  }
                  break

                default:
                  candidateAstNode satisfies never
              }
            }
          }
        })
      }

      // Generic fallback error in case we cannot properly detect the origin of
      // the circular dependency.
      throw new Error(
        `Circular dependency detected:\n\n${toCss([node])}\nRelies on:\n\n${toCss([next])}`,
      )

View on GitHub (pinned to 16e94cbf7f)

Solutions

1. Remove the self-referential `@apply`; a utility already has its own styles.
2. If composing variants, reference a different utility root or inline the shared declarations.
3. Rename so the `@apply` candidate no longer matches the owning utility's root.

Example fix

/* before */
@utility btn-primary {
  @apply btn-primary;
  background: blue;
}

/* after */
@utility btn-primary {
  background: blue;
}

function assertNoSelfApply(utilityName: string, applyParams: string) {
  const root = utilityName.replace(/-\*$/, '')
  for (const candidate of applyParams.split(/\s+/)) {
    if (candidate === root) {
      throw new Error(`@utility ${utilityName} cannot @apply itself (${candidate})`)
    }
  }
}

When it happens

Trigger: `@utility btn { @apply btn-primary; }` where `btn-primary` resolves to the same root, or a utility that `@apply`s itself: `@utility foo { @apply foo; }`. At apply.ts:115, when `next.params.replace(/-\*$/,'') === candidateAstNode.root`, it throws naming the offending candidate.

Common situations: Renaming a utility and forgetting to update a self-`@apply`, or splitting a utility into variants where one variant references the parent root.

Related errors

• Circular dependency detected: ${toCss([node])} Relies on:
• You cannot use `@apply` inside `@keyframes`.
• You cannot use `@apply` with both mixins and utilities. Plea
• The rule `@apply ${list}` must not have a body.
• Cannot apply unprefixed utility class `${candidate}`. Did yo

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