Circular Dependency Detected In TailwindCSS Apply Directive

In this article, we analyze error thrown in substituteAtApply. This error is about circular dependency detected.

walk(rule.nodes, (child) => {
  if (child !== node) return
  throw new Error(
   `You cannot \`@apply\` the \`${candidate}\` utility here because it creates a circular dependency.`,
   )
})

    
    

    
    




This is a high level overview of the code around this error.

  
  
  walk — recursive function:

Let’s begin with walk:

export function walk(
   ast: AstNode[],
   visit: (
     node: AstNode,
     utils: {
     parent: AstNode | null
     replaceWith(newNode: AstNode...