[v4] "Maximum call stack size exceeded" when using @resource with @slot

[Joxeur2]

What version of Tailwind CSS are you using?

4.0.3

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

angular: 19.1.4, tailwindcss: 4.0.3, tailwindcss/postcss: 4.0.3

What version of Node.js are you using?

23.7.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/Joxeur2/tailwind-test.git

Describe your issue

I have an Angular application that I am migrating to Tailwind 4. I'm also using a purchased theme that is based on Tailwind and has also been migrated to Tailwind 4.
However, when I use the theme, I get the error "Maximum call stack size exceeded."

After some investigation, I managed to reproduce the issue and created a separate repo with minimal setup here: https://github.com/Joxeur2/tailwind-test.git

My problem occurs when these two things are present:

• I use a @resource pointing to my main.css to be able to use @apply
• I use a @slot in main.css

I imagine I could move my @variant along with my @slot into another CSS file and only reference the rest with @resource, but as I mentioned, I am using a purchased theme and I would really hate to have to mess with the theme’s code...

[philipp-spiess]

@Joxeur2 Hey! You want to use @custom-variant instead of @variant. @variant was the API used in prerelease versions of Tailwind CSS and while it does work for backward compatibility, it's suggest you change it. Let me look into what causes the call overflow though, thanks for the report 👍

[Joxeur2]

Hi @philipp-spiess,

Thank you for the quick response! Yes, it does indeed solve my problem! Thank you very much for your help !

[philipp-spiess]

Alright we found the culprit haha, the recursion should be fixed with the next patch release going out today 👍 Thanks again!