Ensure first class inside className in React is migrated

CHANGELOG.md

@@ -28,6 +28,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure files with only `@theme` produce no output when built ([#18979](https://github.com/tailwindlabs/tailwindcss/pull/18979))
 - Support Maud templates when extracting classes ([#18988](https://github.com/tailwindlabs/tailwindcss/pull/18988))
 - Show version mismatch (if any) when running upgrade tool ([#19028](https://github.com/tailwindlabs/tailwindcss/pull/19028))
+- Upgrade: Ensure first class inside className in React is migrated ([#19031](https://github.com/tailwindlabs/tailwindcss/pull/19031))
+- Upgrade: Migrate classes inside `*ClassName` and `*Class` attributes ([#19031](https://github.com/tailwindlabs/tailwindcss/pull/19031))
 
 ## [4.1.13] - 2025-09-03
 

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

@@ -112,4 +112,27 @@ describe('is-safe-migration', async () => {
       }),
     ).toEqual(candidate)
   })
+
+  test.each([
+    // Vue classes
+    [`<div class="shadow"></div>`, 'shadow', 'shadow-sm'],
+    [`<div :class="{ shadow: true }"></div>`, 'shadow', 'shadow-sm'],
+    [`<div enter-class="shadow"></div>`, 'shadow', 'shadow-sm'],
+    [`<div :enter-class="{ shadow: true }"></div>`, 'shadow', 'shadow-sm'],
+
+    // React classes
+    [`<div className="shadow"></div>`, 'shadow', 'shadow-sm'],
+    [`<div enterClassName="shadow"></div>`, 'shadow', 'shadow-sm'],
+
+    // Preact-style
+    [`<div enterClass="shadow"></div>`, 'shadow', 'shadow-sm'],
+  ])('replaces classes in valid positions #%#', async (example, candidate, expected) => {
+    expect(
+      await migrateCandidate(designSystem, {}, candidate, {
+        contents: example,
+        start: example.indexOf(candidate),
+        end: example.indexOf(candidate) + candidate.length,
+      }),
+    ).toEqual(expected)
+  })
 })

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

@@ -5,18 +5,16 @@ import * as version from '../../utils/version'
 
 const LOGICAL_OPERATORS = ['&&', '||', '?', '===', '==', '!=', '!==', '>', '>=', '<', '<=']
 const CONDITIONAL_TEMPLATE_SYNTAX = [
-  // Vue
-  /v-else-if=['"]$/,
-  /v-if=['"]$/,
-  /v-show=['"]$/,
-  /(?<!:?class)=['"]$/,
+  // Skip any generic attributes like `xxx="shadow"`,
+  // including Vue conditions like `v-if="something && shadow"`
+  // and Alpine conditions like `x-if="shadow"`,
+  // but allow Vue and React classes
+  /(?<!:?class|className)=['"]$/i,
 
   // JavaScript / TypeScript
   /addEventListener\(['"`]$/,
 
   // Alpine
-  /x-if=['"]$/,
-  /x-show=['"]$/,
   /wire:[^\s]*?$/,
 
   // shadcn/ui variants