Tailwind v3 PostCSS Plugin: `--watch` does not rebuild CSS on changes to content (HTML) files

[nikitaourazbaev]

Discussed in #7045

What version of Tailwind CSS are you using?

v3.0.15

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

postcss-cli 8.3.1

What version of Node.js are you using?

v15.14.0, v16.13.1

What browser are you using?

N/A

What operating system are you using?

macOS 12.1 (21C52)

Reproduction URL

https://github.com/nikitaourazbaev/tw-issue-repro

Describe your issue

After updating to Tailwind 3, watching content files does not work when using Tailwind as a PostCSS plugin. This worked with Tailwind 2 in JIT mode and also works with Tailwind 3 if using the Tailwind CLI. However, when using Tailwind as a PostCSS plugin, I need to touch either the source CSS file or the Tailwind config file in order to successfully trigger a rebuild.

Steps to reproduce:

Clone the reduced test case repo above, then run the install script,  and run the dev script. Open index.html and change the bg-amber-200 text-amber-500 classes on the inner div to any other Tailwind colors (or add any other classes).

The expected result is that the CSS recompiles, as it does with Tailwind v2 (in JIT mode) and with Tailwind v3 when using Tailwind CLI.

Instead, nothing happens until I run the dev script again or touch either the tailwind config file or the CSS file.

^{Originally posted by nikitaourazbaev January 12, 2022}
Not sure if this should be an issue.

Here’s a reduced test case:

https://github.com/nikitaourazbaev/tw-issue-repro

After updating to Tailwind 3, PostCSS / Tailwind no longer picks up on changes in content (HTML) files until I touch either tailwind.config.js or the source css file. This setup worked fine with Tailwind v2 in JIT mode and this setup also works now with Tailwind CLI but running it this way, with Tailwind as a PostCSS plugin, watching doesn’t work.

I’ve tried removing TAILWIND_MODE=watch but it does not seem to have an effect.

Am I doing something wrong with the setup here?

Steps to reproduce:

Run the install script, then the dev script. Then change the bg-amber-200 text-amber-500 classes on the inner div in index.html to any other colors.

The expected result is that the CSS recompiles, as it does with Tailwind v2 and with the Tailwind CLI. Instead, nothing happens until I run the dev script again or touch either the tailwind config file or the CSS file.

[adamwathan]

Hey! Solution here is to update postcss-cli to the latest version (^9), you are using an old version that doesn't include dir-dependency support: postcss/postcss-cli#383

I've cloned your project and updated the dependency locally and things work as expected 👍🏻

[chrissy-dev]

Hey @adamwathan, I still can't get this working on postcss-cli ^10.1.0.

Here's an example: https://github.com/chrissy-dev/eleventy-web-starter/tree/next

As far as I can see, it should work?

---

Edit: Worked it out.

This is a bug with Chokidar. My path had /Personal (Web)/ in it. Removing the parentheses in the dir solved the issue.

This is filed here: #10485