fix(upgrade): prevent nextjs image blur property from modified (#16405)

Fix #16404

---------

Co-authored-by: Philipp Spiess <hello@philippspiess.com>

Author: pnodet

CHANGELOG.md

@@ -18,6 +18,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Revert change to no longer include theme variables that aren't used in compiled CSS ([#16403](https://github.com/tailwindlabs/tailwindcss/pull/16403))
 
+### Fixed
+
+- Upgrade: Don't migrate `blur` to `blur-sm` when used with Next.js `<Image placeholder="blur" />` ([#16405](https://github.com/tailwindlabs/tailwindcss/pull/16405))
+
 ## [4.0.5] - 2025-02-08
 
 ### Added

packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.test.ts

@@ -68,4 +68,9 @@ test('does not replace classes in invalid positions', async () => {
   await shouldNotReplace(`<div v-show="shadow"></div>\n`)
   await shouldNotReplace(`<div x-if="shadow"></div>\n`)
   await shouldNotReplace(`<div style={{filter: 'drop-shadow(30px 10px 4px #4444dd)'}}/>\n`)
+
+  // Next.js Image placeholder cases
+  await shouldNotReplace(`<Image placeholder="blur" src="/image.jpg" />`, 'blur')
+  await shouldNotReplace(`<Image placeholder={'blur'} src="/image.jpg" />`, 'blur')
+  await shouldNotReplace(`<Image placeholder={blur} src="/image.jpg" />`, 'blur')
 })

packages/@tailwindcss-upgrade/src/template/is-safe-migration.ts

@@ -10,6 +10,7 @@ const CONDITIONAL_TEMPLATE_SYNTAX = [
   /x-if=['"]$/,
   /x-show=['"]$/,
 ]
+const NEXT_PLACEHOLDER_PROP = /placeholder=\{?['"]$/
 
 export function isSafeMigration(location: { contents: string; start: number; end: number }) {
   let currentLineBeforeCandidate = ''
@@ -63,5 +64,10 @@ export function isSafeMigration(location: { contents: string; start: number; end
     }
   }
 
+  // Heuristic: Disallow Next.js Image `placeholder` prop
+  if (NEXT_PLACEHOLDER_PROP.test(currentLineBeforeCandidate)) {
+    return false
+  }
+
   return true
 }