Upgrading to Tailwindcss v2

Get Help and Help Others
1

:warning: Note for all upgrading to Tailwind CSS v2 :warning:

As of v2, Tailwind CSS uses PostCSS v8, but RedwoodJS currently uses PostCSS v7. Until RedwoodJS upgrades to v8, we have to use the compatibility version of Tailwind CSS v2.

Fortunately the Tailwind CSS authors thought about this and made it really easy to do! There’s just two step:

  1. Assuming you’ve run the setup command (yarn rw setup tailwind), in your web/package.json, change the version of "tailwindcss" to "npm:@tailwindcss/postcss7-compat":
// web/package.json

...

  "devDependencies": {
    "autoprefixer": "9.8.6",
    "postcss-loader": "4.0.2",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
  }
  1. Then run yarn install and everything should just work! (Let me know if that’s not the case. :sweat_smile:) I’ll update the setup command so that this isn’t an issue going forward.

Relevant Tailwind CSS docs: Installation - Tailwind CSS).

10 Likes
2

Thanks @dom, much appreciated

1 Like
3

Dang that was fast, I’m still reading announcement tweets.

4

At what point does Redwood need (or should it) upgrade to PostCss 8 do people think?

5

Is there a reason not to upgrade to version 8?

1 Like
6

Also, @dom, that’s fantastic that you already have these instructions out! It’s a great service to the community :clap:

1 Like
7

@dthyresson @Tobbe Not quite sure; looking into it now.

1 Like
8

@dom I followed the instructions above, but got the following 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)
TypeError: value.charCodeAt is not a function

I suspected it might be that I was also using TailwindUI and now one no longer needs the plugin.

So, I removed

  plugins: [require('@tailwindcss/ui')],

from my tailwind.config.js and the app seems to render now.

I am going to follow the instructions at

as well.

1 Like
9

I recently upgrade to v0.21 from v0.16. What a jump! The upgrade is somewhat painful. I went straight to postcss v8.1.10 and postcss-loader v4.1.0. So far so good.

@dthyresson you may want to try postcss v8.

1 Like