Tailwind V4 upgrade gives ReferenceError: __dirname is not defined

[AndyMGar]

I get this error when running

npx @tailwindcss/upgrade@next

Seems it's related to the tailwind-variants package though. Would be grateful for any suggestions on what this issue is exactly and how to resolve. Thanks.

Full text here:

Need to install the following packages:
@tailwindcss/upgrade@4.0.0
Ok to proceed? (y) y

≈ tailwindcss v4.0.0

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

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

│ Migrating JavaScript configuration files…

file:///C:/Users/andym/Sites/musilingo/node_modules/tailwind-variants/dist/chunk-FUBUDMV2.js:4
var t=e=>{n.writeFileSync(s.join(__dirname,"generated.d.ts"),e);},c=e=>`export type TVGeneratedScreens = ${Object.keys(e).map(r=>`"${r}"`).join(" | ")};
                                 ^

ReferenceError: __dirname is not defined
    at t (file:///C:/Users/andym/Sites/musilingo/node_modules/tailwind-variants/dist/chunk-FUBUDMV2.js:4:34)
    at file:///C:/Users/andym/Sites/musilingo/node_modules/tailwind-variants/dist/chunk-FUBUDMV2.js:5:71
    at node:internal/process/task_queues:140:7
    at AsyncResource.runInAsyncScope (node:async_hooks:206:9)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)

Node.js v20.18.0

[AndyMGar]

OK - so it seems it was some combination of tailwind-variants, tailwind-aminate and tailwind-3d plug-ins. Removing these allowed the upgrade script to finish OK.

[smith558]

Surely this is not a proper solution though? I am running into the same issue, I can't just remove the packages if I use them.

[smith558]

This was caused by a clash with https://www.tailwind-variants.org/ as pointed out by @AndyMGar. I have solved this without having to remove any packages by removing the Tailwind Variants wrapper from the tailwind.config.ts. You can then add it back in after the upgrade.