Upgrading to Tailwindcss v2

: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 tailwindcss to tailwindcss@compat
// web/package.json

...
  "devDependencies": {
    "autoprefixer": "9.8.6",
    "postcss-loader": "4.0.2",
    "tailwindcss@compat": "^2.0.1"
  }
  1. Then run yarn install. You’ll be presented with select screen. Select 2.0.1-compat:

image

Then everything should 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: https://tailwindcss.com/docs/installation#post-css-7-compatibility-build).

10 Likes

Thanks @dom, much appreciated

1 Like

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

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

Is there a reason not to upgrade to version 8?

1 Like

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

1 Like

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

1 Like

@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

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