Tailwind v0.36 Upgrade Guide

Announcements Releases and Upgrade Guides
1

In Redwood v0.36, Webpack has been upgraded to v5. This allows us to upgrade from PostCSS v7 to v8, which lets us upgrade Tailwind! Projects running yarn redwood setup tailwind for the first time will see this and other config improvements (see related PRs #3087 and #3181), namely purge and Just-in-Time (jit) mode.

Upgrading manually should be just as straightforward. Here’s a guide on how to upgrade your Tailwind setup.

The following changes are recommended for projects using Tailwind CSS, but are not required. Tailwind’s postcss7-compat build will still work on Redwood v0.36.

1. Upgrade dependencies in web/package.json

Before Webpack v5, we had to be careful about which versions of Tailwind and it’s dependencies we were using. If you set up your project with Tailwind before, you most likely have Tailwind’s compatibility build (@tailwindcss/postcss7-compat), and pinned versions of autoprefixer and postcss-loader. Now that we’re on Webpack v5 and can use PostCSS v8, we don’t have to be careful about which versions we’re using and can upgrade to the latest and greatest:

  "devDependencies": {
    "autoprefixer": "^10.3.1",
    "postcss": "^8.3.6",
    "postcss-loader": "^6.1.1",
    "tailwindcss": "^2.2.7"
  }

Then run yarn install.

2. Move and update tailwind.config.js and postcss.config.js

In the past, to get the Tailwind CSS IntelliSense VS Code extension to work, the setup command left the tailwind.config.js file in web/src, even though it was a config file and belonged in web/config. The extension couldn’t detect it there before, but it can now, so we can go ahead and move it there, just to keep things nice and organized.

Doing that requires we update postcss.config.js slightly:

// web/config/postcss.config.js

const path = require('path')

module.exports = {
  plugins: [
-    require('tailwindcss')(path.resolve(__dirname, '../tailwind.config.js')),
+    require('tailwindcss')(path.resolve(__dirname, 'tailwind.config.js')),
    require('autoprefixer'),
  ],
}

Then, if you want to use Tailwind’s Just-in-Time mode, update mode and purge in your tailwind.config.js file to:

// web/config/tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: ['src/**/*.{js,jsx,ts,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  plugins: [],
}

Note that for Just-in-Time mode to work, you have to configure purge, otherwise the compiler doesn’t know which files to watch and it’ll seem like nothing’s working.

You can test that Just-in-Time mode is working by using it’s square-bracket syntax:

<p className="bg-[#bf4722]">This paragraph should be a Redwood red</p>

3. Confirm imports in index.css

You don’t have to make any changes to your project’s web/src/index.css file, but note that it should look similar to the following. The @import lines are required:

/**
 * START --- TAILWIND GENERATOR EDIT
 *
 * `yarn rw setup tailwind` placed these imports here
 * to inject Tailwind's styles into your CSS.
 * For more information, see: https://tailwindcss.com/docs/installation#add-tailwind-to-your-css
 */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
/**
 * END --- TAILWIND GENERATOR EDIT
 */
3 Likes
3

incase it catches anyone else out, some google fonts I was using broken when I upgraded this, I’m assuming because the new version has some stricter rules around how to use imports with postcss.

Relevant tailwind docs:

What fixed it for me was I put my font imports into a new css file and imported that into App.tsx
diff here https://github.com/Irev-Dev/cadhub/commit/1c13a38ccbca2b30954c75246850e7b5ca728e14

One other note is that the fonts worked fine with yarn rw dev, had to use yarn rw build && yarn rw serve to replicate broken fonts and then test they would work okay in prod after fix.

3 Likes