Unable to execute upgrade@next

[suhailifaizzi]

Hi,

I'm having difficulty moving to version 4, whenever I execute npx @tailwindcss/upgrade@next, I'm getting the following.
For context purposes, we were running Tailwind 2.2.4, about a month ago, we upgraded to version 3, then this week we saw version has become available, therefore we try to upgrade to version 4.

`tailwindcss v4.0.0

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

│ ↳ Linked ./tailwind.config.js to ./src/css/index.css

│ Migrating JavaScript configuration files…

│ ↳ Could not load the configuration file: variants is not a function `

However I do not have @Variants in my ./tailwind.config.js

Environment details:

Node.js: v22.12.0
npm: 10.9.0
Tailwind CSS: ^3.0.0
PostCSS: 8.5.1
OS: Mac OS (Apple Silicon)

Related Files
tailwind copy.config.js.txt

index.css.txt

[wongjn]

Seems like it could be one or both of the Tailwind plugins you have. You could try commenting out/removing them and see if the migration goes better.

[suhailifaizzi]

Hi Wong, thank you for your respond.
I decided to upgrade manually.
It seems ok now, I am able to build after upgrading manually.

[andypiper]

You had:

  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp')
  ],
}

FWIW, in my case both of those specific plugins (I had others, but also those two) also caused the upgrade wizard to fail, when I commented them out, it was able to run. Now, I have other issues with the migration, but those two seem to be culprits of this "variants is not a function" error.

[joffreypersia]

It didn't fix my issue :(

[wongjn]

What's your issue?

[suhailifaizzi]

Due to time contraint, I decide to close this discussion and upgrade manually.