Parsing errors after upgrading to TW 4

[pavanpodila]

What version of Tailwind CSS are you using?

4.0.1

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

Next 15.1.6

What version of Node.js are you using?

23

What browser are you using?

Chrome

What operating system are you using?

macOS

Describe your issue

After upgrading to TW 4.0.1, I am getting parsing errors like so:

Parsing css source code failed
  2860 |     &::before {
  2861 |       content: var(--tw-content);
> 2862 |       --tw-content: '';
       |                                 ^
  2863 |       content: var(--tw-content);
  2864 |     }
  2865 |   }

Unexpected token Semicolon at [project]/app/globals.css:2861:32

I think some generation code inside TW is broken.

[RobinMalfait]

Hey!

Can you share a minimal reproduction GitHub repo so we can take a look?

[pavanpodila]

After some more digging I figured it was due to taildwincss-animate plugin. Once I removed it from my css, it started working fine. Looks like some of these legacy plugins could be causing issues as they may not migrate to v4 that quickly.