No rebuild css in jit mode using watch on postcss 7

What version of Tailwind CSS are you using?

v2.2.7

What build tool (or framework if it abstracts the build tool) are you using?

postcss 7

What version of Node.js are you using?

14.17.3

What browser are you using?

N/A

What operating system are you using?

Windows 10

Reproduction repository

https://github.com/huibizhang/create-react-app

Describe your issue

This problem is occurring at postcss 7 environment, like Vue-CLI and Create React App.

Tailwind’s version over 2.1.4 and come to 2.2, use following steps of document Installation to install and setup jit mode are invalid.

When add a new class after tailwind first build on dev server opened, it not works. I have to reopen dev server, and the class well be actived.

For example: on cra, use following step to setup jit mode with tailwind 2.1.4, its running very well. But, when everything as same as 2.1.4 that I do, just tailwind version comes to 2.2, jit’s rebuild is not working.

Ummm … I’m trying to use tailwindcss-cli to watch files and include output file in js

tailwindcss-cli -i tailwind.css -o index.css -w

It works, but tailwindcss-cli dependent postcss 8, but project just can using postcss 7, I’m worry that maybe something will getting wrong in feature.

That’s all my questions, thank you!

[huibizhang]

@adamwathan , @shantiscript thanks a ton. I find the solution for this.

on postcss 7, set enviornment variables TAILWIND_MODE=watch can prefectally work.

  "scripts": {
+   "start": "cross-env TAILWIND_MODE=watch craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

linux based can only "start": "TAILWIND_MODE=watch craco start" but I’m using Windows, so I need to install package cross-env, cross-env also can works on linux based. It’s same problem on vue-cli 4, and this solution can resolved too.

This is my test: https://github.com/huibizhang/create-react-app/tree/resolved

[SebasScript]

just had the same issue setting up a new create-react-app. In jit mode new classes where only added when restarting the node dev server. Downgrading Taiwlind to below 2.1.4 solved the issue for now