Do not migrate declarations in <style> blocks

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Upgrade: Do not migrate declarations that look like candidates in `<style>` blocks ([#18057](https://github.com/tailwindlabs/tailwindcss/pull/18057))
 
 ## [4.1.7] - 2025-05-15
 

integrations/upgrade/index.test.ts

@@ -2967,6 +2967,87 @@ test(
   },
 )
 
+test(
+  'upgrade <style> blocks carefully',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "tailwindcss": "^4",
+            "@tailwindcss/upgrade": "workspace:^"
+          }
+        }
+      `,
+      'src/index.vue': html`
+        <template
+          <div class="!flex"></div>
+        </template>
+
+        <style>
+        @reference "./input.css";
+
+        .foo {
+          @apply !bg-red-500;
+        }
+
+        .bar {
+          /* Do not upgrade the key: */
+          flex-shrink: 0;
+        }
+        </style>
+      `,
+      'src/input.css': css`
+        @import 'tailwindcss';
+
+        .foo {
+          flex-shrink: 1;
+        }
+
+        .bar {
+          @apply !underline;
+        }
+      `,
+    },
+  },
+  async ({ exec, fs, expect }) => {
+    await exec('npx @tailwindcss/upgrade')
+
+    expect(await fs.dumpFiles('./src/**/*.{css,vue}')).toMatchInlineSnapshot(`
+      "
+      --- ./src/index.vue ---
+      <template
+        <div class="flex!"></div>
+      </template>
+
+      <style>
+      @reference "./input.css";
+
+      .foo {
+        @apply !bg-red-500;
+      }
+
+      .bar {
+        /* Do not upgrade the key: */
+        flex-shrink: 0;
+      }
+      </style>
+
+      --- ./src/input.css ---
+      @import 'tailwindcss';
+
+      .foo {
+        flex-shrink: 1;
+      }
+
+      .bar {
+        @apply underline!;
+      }
+      "
+    `)
+  },
+)
+
 function withBOM(text: string): string {
   return '\uFEFF' + text
 }

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

@@ -22,6 +22,37 @@ export function isSafeMigration(
   location: { contents: string; start: number; end: number },
   designSystem: DesignSystem,
 ): boolean {
+  // Ensure we are not migrating a candidate in a `<style>` block. The heuristic
+  // would be if the candidate is preceded by a whitespace and followed by a
+  // colon and whitespace.
+  //
+  // E.g.:
+  // ```vue
+  // <template>
+  //   <div class="foo"></div>
+  // </template>
+  //
+  //
+  // <style>
+  // .foo {
+  //   flex-shrink: 0;
+  //  ^           ^^
+  // }
+  // </style>
+  // ```
+  if (
+    // Whitespace before the candidate
+    location.contents[location.start - 1]?.match(/\s/) &&
+    // A colon followed by whitespace after the candidate
+    location.contents.slice(location.end, location.end + 2)?.match(/^:\s/) &&
+    // A `<style` block is present before the candidate
+    location.contents.slice(0, location.start).includes('<style') &&
+    // `</style>` is present after the candidate
+    location.contents.slice(location.end).includes('</style>')
+  ) {
+    return false
+  }
+
   let [candidate] = Array.from(parseCandidate(rawCandidate, designSystem))
 
   // If we can't parse the candidate, then it's not a candidate at all. However,