Next.js image placeholder blur attribute get updated with tailwind upgrade tool

[Megaemce]

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.js 15.1.6

What version of Node.js are you using?

23.6.1

What browser are you using?

N/A

What operating system are you using?

Windows

Reproduction URL

1. Have a sample Next.js project with Image component that have placeholder attribute set to blur like so

import Image from "next/image";

export default function Avatar() { 

return (
        <Image
            width={40}
            height={40}
            src={guideImage}
            placeholder="blur"
            quality={50}
            priority={true}
            alt={`${chatSettings.voice} avatar`}
            className="h-10 w-10 rounded-full bg-base-100"
        />
    );

}

2. Run the npx @tailwindcss/upgrade@next
3. Endup with code like so

import Image from "next/image";

export default function Avatar() { 

return (
        <Image
            width={40}
            height={40}
            src={guideImage}
            placeholder="blur-sm"  <-- it's mistaked for CSS class
            quality={50}
            priority={true}
            alt={`${chatSettings.voice} avatar`}
            className="h-10 w-10 rounded-full bg-base-100"
        />
    );

}

Describe your issue

Upgrading tool is mistaking a placeholder blur attribute with CSS class.

[wongjn]

See #15090 (comment)

[philipp-spiess]

Hey! Unfortunately the upgrade tool can have false-positives. This one in particular is a hard one to find because placeholder could also be a property name that is later be used within a className.
That's why the docs mention to do an in-depth review after running it: https://tailwindcss.com/docs/upgrade-guide#using-the-upgrade-tool