Fresh install of Redwood JS + Tailwind is not working

Get Help and Help Others
1

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
2

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?

3

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
4

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
5

@dom speaks the truth

:wink:

1 Like
6

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
7

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
8

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

2 Likes
9

Thanks so much for this!!