[v4] @tailwindcss/upgrade@next upgrade tool/script is failing on upgrading the tailwindcss package

[ofranquesa]

When running the script or tool, it doesn't update the tailwindcss package itself neither the package.json.

I've seen in other users the output "Updated package: tailwindcss" but I don't get this message.

Any thoughts on what the problem might be?

[wongjn]

You might have peer dependency conflicts. See #15885 (comment) as an example of someone else having had similar issues.

[ofranquesa]

Thanks for your prompt answer!

Similar to the user's issue, I've manually updated the package but CSS now doesn't affect the rendering.

I am using PNPM btw, so I don't get the option of npm ci here.

[ofranquesa]

@wongjn gave you access to the private repo. branch "design_revamp". Thank you so much!

[wongjn]

The branch still looks like it's in its v3 code, i.e. the upgrade tool hasn't been run on it?

[ofranquesa]

yes exactly. I've left it ready to update it using the tool so you can see what's going on in there :)

[wongjn]

Got some CSS working:

The discrepencies is probably due to v3 → v4 changes you'll have to adapt yourself. Steps:

1. Run upgrader:

   $ npx @tailwindcss/upgrade

2. Install packages manually:

   $ pnpm i -w tailwindcss@latest @tailwindcss/postcss

3. Update postcss.config.js:

    module.exports = {
    plugins: [
   + 'tailwindcss',
   - '@tailwindcss/postcss',
     'postcss-flexbugs-fixes',

[ofranquesa]

Beautiful! Tried on the branch and looks like working as expected :)

Thank you very much Justin!