[v4] Tailwind v4 upgrade script renames camelCase'd colors/fonts to kebab-case, but does not update usages.

[nicksergeant]

What version of Tailwind CSS are you using?

v3.4.17

What version of Node.js are you using?

v23.5.0

What operating system are you using?

macOS 15.2

Describe your issue

When using npx @tailwindcss/upgrade@next, if you have custom color/font overrides such as this:

module.exports = {
  theme: {
    extend: {
      colors: {
        flxBlue: '#19acff',
      }
    }
  }
}

The upgrade script will rename flxBlue to flx-blue, resulting in:

@import 'tailwindcss';

@plugin '@tailwindcss/container-queries';
@plugin 'tailwindcss-animate';

@theme {
  --color-flx-blue: #19acff;
}

Which seems OK, but existing usages are not updated (just an example diff showing the text-flxBlue not being modified):

@@ -9,7 +9,7 @@ interface ClaimPlaceCTAProps {

 export default function ClaimPlaceCTA({ place }: ClaimPlaceCTAProps) {
   return (
-    <div className="relative mt-8 w-full rounded-xl border border-zinc-200 bg-gradient-to-br from-white/95 to-zinc-50/95 p-8 text-center backdrop-blur-sm dark:border-zinc-800 dark:from-zinc-900/95 dark:to-zinc-9
50/95">
+    <div className="relative mt-8 w-full rounded-xl border border-zinc-200 bg-linear-to-br from-white/95 to-zinc-50/95 p-8 text-center backdrop-blur-xs dark:border-zinc-800 dark:from-zinc-900/95 dark:to-zinc-950
/95">
       <h3 className="font-renogare text-xl text-townWireBlue dark:text-flxBlue">
         Own this business?
       </h3>

Reproduction URL

Very simple demo repo here w/ Next.js on Tailwind v3: https://github.com/nicksergeant/tailwind-v4-upgrade-colors

The original color definition and usage:

• Definition: https://github.com/nicksergeant/tailwind-v4-upgrade-colors/blob/03e9fa38ac880227f9e507a7722f1e21f5dd51ae/tailwind.config.js#L11
• Usage: https://github.com/nicksergeant/tailwind-v4-upgrade-colors/blob/03e9fa38ac880227f9e507a7722f1e21f5dd51ae/app/page.tsx#L12

And here is a branch showing the Tailwind v4 upgrade script (no other changes other than the automatic upgrade): https://github.com/nicksergeant/tailwind-v4-upgrade-colors/compare/ns/upgrade-to-v4

• Definition in v4: https://github.com/nicksergeant/tailwind-v4-upgrade-colors/blob/602c95ee9d52689e357a6eb7b1662b66e0f397b8/app/globals.css#L4
• Usage in v4 not updated to the new name: https://github.com/nicksergeant/tailwind-v4-upgrade-colors/blob/602c95ee9d52689e357a6eb7b1662b66e0f397b8/app/page.tsx#L12

[navid70]

is there a fix for this issue?

[philipp-spiess]

This is going to be migrated with the next release when migrating from 3 to 4. Better late than never I guess 🙈