Error while Migrate from TailwindCSS V3 to V4 using npx @tailwindcss/upgrade

[codezeros]

i tried to upgrade from tailwindcss v3 to v4 using npx @tailwindcss/upgrade --force I got this error

PS C:\Users\name\Projects\portfolio> npx @tailwindcss/upgrade --force     
(node:50016) ExperimentalWarning: CommonJS module C:\Users\name\AppData\Roaming\npm\node_modules\npm\node_modules\debug\src\node.js is loading ES Module C:\Users\name\AppData\Roaming\npm\node_modules\npm\node_modules\supports-color\index.js using require().
Support for loading ES Module in require() is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
≈ tailwindcss v4.0.0

│ Searching for CSS files in the current directory and its subdirectories…

│ ↳ Linked `.\tailwind.config.ts` to `.\src\styles\globals.css` 

│ Migrating JavaScript configuration files…

│ ↳ Could not load the configuration file: `addUtilities({ ':root' : … })` defines an invalid utility selector. Utilities must be a single class name and start with a lowercase letter, eg. 
│   `.scrollbar-none`.

I saw many were having the same issue, especially on Windows #15220 if any anyone know a solution pls tell me

[muhammad-fiaz]

Hello @codezeros

I had this same problem and i tried removing plugins from tailwindcss.config.ts or tailwindcss.config.js and it worked after removing them :) and you can add back based on the new tailwindcss v4 refer: https://tailwindcss.com/docs/functions-and-directives#plugin-directive and https://tailwindcss.com/docs/adding-custom-styles

[wongjn]

This. If that addUtilities({ ':root' : … }) call is your own code, you can add the v4-equivalent back in after migrating.

[muhammad-fiaz]

This. If that addUtilities({ ':root' : … }) call is your own code, you can add the v4-equivalent back in after migrating.

yeah tailwindcss v4 has major changes so after migrating I added the plugins again based on the new tailwind v4

[codezeros]

This. If that addUtilities({ ':root' : … }) call is your own code, you can add the v4-equivalent back in after migrating.

yeah tailwindcss v4 has major changes so after migrating I added the plugins again based on the new tailwind v4

Thanks It works now!

PS C:\Users\name\Projects\portfolio> npx @tailwindcss/upgrade --force
(node:31448) ExperimentalWarning: CommonJS module C:\Users\name\AppData\Roaming\npm\node_modules\npm\node_modules\debug\src\node.js is loading ES Module C:\Users\name\AppData\Roaming\npm\node_modules\npm\node_modules\supports-color\index.js using require().
Support for loading ES Module in require() is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
≈ tailwindcss v4.0.0

│ Searching for CSS files in the current directory and its subdirectories…

│ ↳ Linked `.\tailwind.config.ts` to `.\src\styles\globals.css` 

│ Migrating JavaScript configuration files…

│ ↳ The configuration file at `.\tailwind.config.ts` could not be automatically migrated to the new CSS configuration format, so your CSS has been updated to load your existing configuration 
│   file.

│ Migrating templates…

│ ↳ Migrated templates for configuration file: `.\tailwind.config.ts` 

│ Migrating stylesheets…

│ ↳ Migrated stylesheet: `.\src\styles\globals.css` 

│ Migrating PostCSS configuration…

│ ↳ The PostCSS config contains dynamic JavaScript and can not be automatically migrated.

│ Updating dependencies…

│ ↳ Updated package: `prettier-plugin-tailwindcss` 

│ ↳ Updated package: `tailwindcss` 

│ Verify the changes and commit them to your repository. 
PS C:\Users\name\Projects\portfolio>