Description
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