How to run a command after Tailwind JIT compiler ran a build in watch mode?

481 Views Asked by At

Context: I need to run a command every time Tailwind's just-in-time compiler ran a new build in watch mode. To be more specific, I need to rebuild Drupal's cache for the changes to take effect.

Unfortunately, watching for modifications of output.css with inotifywait doesn't work because the JIT compiler doesn't recreate output.css in all circumstances. For example, if you add the border-2 class for the first time, a new version of output.css is built. However, if you remove border-2 again, the compiler won't recreate output.css for legitimate reasons. See JIT compilation doesn't remove unused classes when the DOM changes · Issue #57 · tailwindlabs/tailwindcss-jit.

I also tried using tee and watching the output file with inotifywait without success. npx tailwindcss -i input.css -o output.css --watch | tee tailwind-built doesn't write to tailwind-built for reasons I don't get.

1

There are 1 best solutions below

0
On

I found a solution based on tee finally.

Problem was that Tailwind's CLI at the time of writing uses console.error (see here) to report

Rebuilding...

Done in 33ms.

So npx tailwindcss -i input.css -o output.css --watch 2>&1 | tee tailwind-built (added 2>&1) and watching tailwind-built with inotifywait does the trick.