Fresh install of Redwood JS + Tailwind is not working

Hello,

I just tried doing a fresh installation of Redwood.js:

yarn create redwood-app ./my-app
cd my-app

And then added tailwind:

yarn rw setup tailwind   

And then based on this post I changed tailwind to the compatibility version

When I try to run the app, I get this error:

./src/index.css (../node_modules/css-loader/dist/cjs.js??ref--4-oneOf-4-1!../node_modules/postcss-loader/dist/cjs.js??ref--4-oneOf-4-2!./src/index.css) Error: [object Object] is not a PostCSS plugin

CleanShot 2020-11-18 at 20.09.42

Any idea how I can fix this?

1 Like

Hey @akiarostami, I was actually seeing the same error before changing tailwind to the compatibility version (i.e. when trying to install 2.0.1 straight-up). I’ll try the steps again on another fresh install now, but just to confirm, you ran yarn install after changing to the compatibility version?

hi @dom,

Thanks for the prompt reply, and thank you for patiently reminding me my age and forgetfulness! How could I miss that?! I can confirm that yarn install fixed the issue. Sorry!

1 Like

haha don’t worry–I literally forget all the time! I’m especially guilty of it when trying to contribute… @thedavid can attest to this: I’ll forget to yarn build or yarn install and then spend a few trying minutes wondering why it’s not working.

2 Likes

@dom speaks the truth

:wink:

1 Like

tldr:

Specific steps I used to make this work (as described in message above)

  1. modify web/package.json
    change
    "devDependencies": { "autoprefixer": "9.8.6", "postcss-loader": "4.0.2", "tailwindcss": "^2.0.1" }

to

"devDependencies": { "autoprefixer": "9.8.6", "postcss-loader": "4.0.2", "tailwindcss@compat": "^2.0.1" }

  1. yarn install
    select ‘2.0.1-compat’ from list
1 Like

I ended up with the following after running yarn rw setup tailwind

  1. cd ./web
  2. yarn add -D tailwind@compat - select latest version 2.0.1-compat

after I got an error for PostCSS 8 Error resolve

  1. update postcss-loader and add postcss yarn add -D postcss-loader postcss
    Final dev dep list:
    "devDependencies": {
    "autoprefixer": "9.8.6",
    "postcss": "^8.2.1",
    "postcss-loader": "^4.1.0",
    "tailwindcss": "^2.0.1-compat"
  }

Now it’s working on this end :+1:

2 Likes

FYI the next release of RedwoodJS has a fix for this:

2 Likes

Thanks so much for this!!