Cannot compile with multiple @apply - Maximum call stack size exceeded

[senordelaflor]

What version of Tailwind CSS are you using?

3.0.0

What build tool (or framework if it abstracts the build tool) are you using?

Postcss 8.4.4, webpack 5.36.1, Sass

What version of Node.js are you using?

v12.22.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/i3Ja7ZD819?file=css

Describe your issue

Tailwind cannot compile and hangs when multiple @apply are used. This is happening in both SCSS and CSS. This is the error:

I can see that this is also happening in play.tailwindcss.com

Thanks so much for looking into this. We've been loving Tailwindind and can't wait to use v3!

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

You have a circular dependency:

.button.hidden {
  @apply hidden;
}

You are trying to apply hidden in a selector that uses hidden.

I made a PR to detect this and will be available in the next version: #6365