Upgrade to 4.x using @tailwindcss/upgrade breaks so many things

[mattholy]

What version of Tailwind CSS are you using?

v3.4.17 -> v4.0.8

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

Vite 6.2.0

What version of Node.js are you using?

v22.13.1

What browser are you using?

Chrome

What operating system are you using?

Windows WSL Ubuntu 22.04

Reproduction URL

Will make one later

Describe your issue

After running npx @tailwindcss/upgrade, I noticed that @tailwindcss/upgrade automatically changed the names of all Tailwind CSS classes.

For example:

• blur was changed to blur-sm
• shadow was changed to shadow-sm

However, the real issue is that it not only changed Tailwind CSS classes but also modified every value of text variable in my .vue files, regardless of whether they were Tailwind CSS classes.

e.g. A configurable item of ECharts called trigger, and the valid value is blur, but @tailwindcss/upgrade changed it to blur-sm

[philipp-spiess]

Hey! Check out my response here for more context: #16305 (comment)

If you have a concrete example we can try to improve the heuristics but since it uses the same underlying scanner as Tailwind itself (to make sure we don't overlook certain examples) this particular migration is a bit subtle to false positives. That's one of the reasons why we recommend doing a manual audit afterwards.

[mattholy]

Hey! Check out my response here for more context: #16305 (comment)

If you have a concrete example we can try to improve the heuristics but since it uses the same underlying scanner as Tailwind itself (to make sure we don't overlook certain examples) this particular migration is a bit subtle to false positives. That's one of the reasons why we recommend doing a manual audit afterwards.

I think I had the same problem with #16305

So I will close this issue.

[mattholy]

Just tested again, the remaining key words will be changed unexpectedly are blur and shadow