[v4]: running npx @tailwindcss/upgrade@next in vue changes emit(blur) event to blur-sm

[jwstn]

What version of Tailwind CSS are you using?

4.0.1 beta. upgraded from 3.4.3 via npx @tailwindcss/upgrade@next

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

postcss-cli v8.4.44 in the private project where the bug occured

What version of Node.js are you using?

For example: v12.0.0

What browser are you using?

Firefox v132.0.2 (aarch64)

What operating system are you using?

macOS v 14.6.1 (23G93)

Reproduction URL

pull-request of the code changes where the bug is visible

Describe your issue

When I was using the mentioned upgrade tool to change my tailwind files from v3 to v4 I went through the changes it made and saw that some of my custom vue emits, which I called blur, also changed to blur-sm. For a better look, i provieded a miniaml reproduction above

[philipp-spiess]

Hey @jwstn. This is why we include a note in our update guides to carefully review the changes: https://tailwindcss-com-git-v4-beta-docs-tailwindlabs.vercel.app/docs/v4-beta#upgrading-from-v3

There are some cases where we can't discriminate wether you're setting a class name or using the string for something else. If the content is wrapped in a string like you have it (e.g. 'blur'), only the runtime would know wether this is used as a class name or not.

[jwstn]

alright, did not see the note. im sorry!

Edit: I saw that note, but I though I over read something related to [...]If the content is wrapped in a string like you have it (e.g. 'blur'), only the runtime would know wether this is used as a class name or not.

Anyway, thanks for the quick answer :)

[mhsnook]

I got a similar issue with this situation:

It seems like you would be able to tell from the code that this is not a class name?

style={{
	filter: 'drop-shadow-sm(0px 0px 2px #fff)',
}}

But I'm not complaining, just trying to help. TY for the excellent code mod! It's a big help.