Redwood: PostCSS / Autoprefixer versions are currently throwing errors

[bennettrogers]

It looks like there are some issues with the combination of the most recent versions of PostCSS and Autoprefixer. New Redwood projects install PostCSS 7, and the instructions for installing Tailwind result in the newest version of Autoprefixer being installed (currently v10). There's a compatibility issue between these versions.

The current recommendation seems to be install Autoprefixer v9. This fixed the error for me. (It was throwing Error: true is not a PostCSS plugin).

There's a relevant issue here.

[dthyresson]

I also ran into this issue today and the solution was to downgrade to:

"autoprefixer": "^9.8.6",

Should:

1) Redwood upgrade to use PostCSS 8 and apps the v10 of autoprefixer?
2) The tailwind generator explicitly install "autoprefixer": "^9.8.6", until then?

[noire-munich]

Hum the downgrade is not working for me, here's my outdated print:

Package                           Current Wanted Latest Workspace Package Type    URL                                        
autoprefixer                      9.8.6   9.8.6  10.0.0 web       devDependencies https://github.com/postcss/autoprefixer#readme                            
postcss-loader                    3.0.0   3.0.0  4.0.2  web       devDependencies https://github.com/webpack-contrib/postcss-loader                         
tailwindcss                       1.7.3   1.8.10 1.8.10 web       devDependencies https://tailwindcss.com                            

RW is v0.19.0 and I had installed Tailwind through the utility at project setup.

Any chance there could be a bit more to it?

[dthyresson]

@noire-munich my working configuration in v19 is

  "devDependencies": {
    "autoprefixer": "^9.8.6",
    "postcss-loader": "^4.0.2",
    "tailwindcss": "^1.8.10"
  }

I don't think I saw that combination in your list.

[noire-munich]

Indeed, it moved forward on css but the svg loading is down - different issue though.
Thanks @dthyresson !

[peterp]

@dthyresson Should this be closed?

[dthyresson]

@dthyresson Should this be closed?

Sorry, no. I closed the wrong issue. Reopening to determine the next steps:

1. Redwood upgrade to use PostCSS 8 and apps the v10 of autoprefixer?

or

1. The tailwind generator explicitly install "autoprefixer": "^9.8.6", until then?

[jangxyz]

Sorry for knocking the door again, but it seems like this is broken again.

Doing a fresh create redwood-app and yarn rw setup tailwind complains about postcss 8, again.

The version of "tailwindcss" installed is now "^2.0.2" instead of "^1.8.10"from above. Changing the version back to "^1.8.10" and reinstalling the package seems to work. "1.9.6" is the version that's actually installed -- maybe some major change with v2 in tailwind?

I just found out about tailwind during the process of redwood tutorial and trying it out, so I can't say I know much about both projects. I'm just hoping the setup goes smoothly as the originally intended.

Thanks.

[dthyresson]

maybe some major change with v2 in tailwind?

Hi @jangxyz

I'll try to reproduce with a fresh install of create redwood app and yarn rw setup tailwind and see what might be happening.

Here is a community post with some info on the upgrade from v1 to v2 for existing RWJS projects -- and how to use TailwindUI as well:

https://community.redwoodjs.com/t/upgrading-to-tailwindcss-v2/1472/8

[dthyresson]

@jangxyz @thedavidprice and @jtoar

I realized what the issue is:

Need to use:

"tailwindcss": "npm:@tailwindcss/postcss7-compat"

as noted in https://community.redwoodjs.com/t/upgrading-to-tailwindcss-v2/1472.

@jangxyz If you switch your web package.json to:

  "devDependencies": {
    "autoprefixer": "9.8.6",
    "postcss-loader": "4.0.2",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
  }

and yarn ... it should work again.

And it looks like @jtoar already fixed this in the next release:

https://github.com/redwoodjs/redwood/commits/main/packages/cli/src/commands/setup/tailwind/tailwind.js

I think we can keep this issue closed and direct people to the forum post until the next release.