Ensure first class inside className in React is migrated (#19031)

### 1. Handling React className migration

The PR fixes an issue when migrating React components to tailwind v4
with the migration tool, that the first class after `className="` is
ignored.

For example, when migrating
```JSX
<div className="shadow"></div>
```
`shadow` will not be migrated to `shadow-sm` .

This is because in `is-safe-migration.ts`, it tests the line before
candidate with regex `/(?<!:?class)=['"]$/`. This basically skips the
migration for anything like `foo="shadow"`, with only exception for Vue
(eg. `class="shadow"`).

The PR changes the regex from

```regex
/(?<!:?class)=['"]$/
````
to
```regex
/(?<!:?class|className)=['"]$/
```
which essentially adds a new exception specifically for React's
`className="shadow"` case.

### 2. Removing redundant rules

Besides, I found that several other rules in
`CONDITIONAL_TEMPLATE_SYNTAX` being redundant since they are already
covered by the rule above, so I removed them. If we prefer the previous
explicit approach, I can revert it.

## Test plan

<!--

Explain how you tested your changes. Include the exact commands that you
used to verify the change works and include screenshots/screen
recordings of the update behavior in the browser if applicable.

-->

Tests added for both the Vue and React classes to prevent false negative
cases.

---------

Co-authored-by: Jordan Pittman <[email protected]>

Author: govizlora

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