Skip to content

CLI Watch never end 2 CPU cores at 100% #17246

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
deguich opened this issue Mar 17, 2025 · 14 comments
Open

CLI Watch never end 2 CPU cores at 100% #17246

deguich opened this issue Mar 17, 2025 · 14 comments

Comments

@deguich
Copy link

deguich commented Mar 17, 2025

What version of Tailwind CSS are you using?

v4.0.14

What version of Node.js are you using?

v20.18.0

What operating system are you using?

Windows 11

Reproduction URL

I just use the Tailwind4 directory of https://github.com/pinzonjulian/tailwind_css_cli_watch_bug.git

git clone https://github.com/pinzonjulian/tailwind_css_cli_watch_bug.git
cd tailwind4
npm install tailwindcss @tailwindcss/cli
npx @tailwindcss/cli -i input.css -o output.css --watch

Describe your issue

Command never end, there is no output, 2 cores at 100%.

If I remove output.css, the process don't create it.

When I remove --watch.
It works :

> $env:DEBUG=1; npx @tailwindcss/cli -i input.css -o output.css
≈ tailwindcss v4.0.14

Done in 91ms

[95.04ms] [@tailwindcss/cli] (initial build)
[14.09ms]   ↳ Setup compiler
[38.04ms]   ↳ Scan for candidates
[33.33ms]   ↳ Build CSS
[ 1.06ms]   ↳ Write output

Could a global configuration be the cause of the problem?

@deguich
Copy link
Author

deguich commented Mar 17, 2025

I encounter the same problem with:

  • tailwindcss.exe -i input.css -o output.css --watch
  • $env:NODE_PATH=""; $env:DEBUG=1; npx @tailwindcss/cli -i input.css -o output.css -w
  • $env:NODE_PATH=""; $env:DEBUG=1; npx @tailwindcss/cli -i input.css -o output.css -w after renaming ~/AppData/Roaming npm and npm-cache (same with Appdata/Local...)

@philipp-spiess
Copy link
Member

Hey! I tried running your example on macOS and it works fine (I tried with your exact Node version and v22 (what I had installed before):

Image

Going to try this out on Windows 11 later too, but I wonder what happens if you run the --watch command with the DEBUG=1 flag?

Command never end

This is expected for the --watch command as it needs to stay alive to detect file changes

@deguich
Copy link
Author

deguich commented Mar 17, 2025

With DEBUG=1, there is no output and 2 cores at 100%.

@deguich
Copy link
Author

deguich commented Mar 17, 2025

I got the same result with Node.js v22.14.0 (npm 10.9.2).

@deguich
Copy link
Author

deguich commented Mar 17, 2025

I tried on another windows (v10). It works

@deguich
Copy link
Author

deguich commented Mar 17, 2025

Tailwind CSS seems to be incompatible with the Watchman (Meta) software.
Can you reproduce the issue by installing it via Chocolatey?

choco install watchman

If I delete the shim-generated file:
C:\ProgramData\chocolatey\bin\watchman.exe,
Tailwind CSS starts working again.

This suggests that Tailwind CSS is likely using Watchman in the background for file watching. When it launches the 2025 version found in the PATH (the one installed via Chocolatey), it may trigger unexpected behavior (infinite loop?).

@deguich
Copy link
Author

deguich commented Mar 18, 2025

I see on @parcel/watcher:

@parcel/watcher has the following watcher backends, listed in priority order:

[FSEvents](https://developer.apple.com/documentation/coreservices/file_system_events) on macOS
[Watchman](https://facebook.github.io/watchman/) if installed
[inotify](http://man7.org/linux/man-pages/man7/inotify.7.html) on Linux
[ReadDirectoryChangesW](https://msdn.microsoft.com/en-us/library/windows/desktop/aa365465%28v%3Dvs.85%29.aspx) on Windows
[kqueue](https://man.freebsd.org/cgi/man.cgi?kqueue) on FreeBSD, or as an alternative to FSEvents on macOS

A log about the watcher used or a compatibility check on the version could be a plus to facilitate problem identification.
If Tailwind CSS does not work regardless of the Watchman version, prohibiting the use of Watchman at the code level would then be a solution.

@philipp-spiess
Copy link
Member

@deguich Hey! Thanks for digging into it. Are you able to reproduce the problem when using @parcel/watcher directly? If so, it would be awesome if we can create an upstream bug report for that project and get it fixed for everyone using @parcel/watcher!

@lenart
Copy link

lenart commented Mar 25, 2025

I'm experiencing same problem on Mac M2 using Node v22.14.0 and Yarn 1.22.22. When running npx @tailwindcss/cli -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css the CPU (dockerized) goes to >100% and stays there. The Orbstack Helper (on the host OS) reports over a thousand % CPU usage 😓 .

I get the same issue when running on host OS using Node v23.7.0 (different than dockerized), yarn 1.22.22.

@lenart
Copy link

lenart commented Mar 25, 2025

I can confirm that locking version at 4.0.15 solves the issue for me. Uninstall any existing tailwind packages (locally and globally) and clear the cache npm cache clean --force. Then install 4.0.15:

npm install @tailwindcss/[email protected]
npx @tailwindcss/cli -i app.scss -o app.css # builds

@philipp-spiess
Copy link
Member

@lenart The issue you're running into might be #17379 and is unrelated to watch mode. Do you mind taking a look there and, if possible, can provide us with a reproduction of that issue? Thanks!

@flavorjones
Copy link

flavorjones commented Mar 26, 2025

I can reproduce what seems to be this issue when I have watchman installed; and it goes away when I uninstall watchman.

With watchman installed, on a Linux x86_64 GNU libc system (native, not in a container) running with DEBUG=1, I see:

22:14:29 css.1  | [81399.36ms] [@tailwindcss/cli] (initial build)
22:14:29 css.1  | [   12.32ms]   ↳ Setup compiler
22:14:29 css.1  | [   33.67ms]   ↳ Scan for candidates
22:14:29 css.1  | [   11.92ms]   ↳ Build CSS
22:14:29 css.1  | [    1.04ms]   ↳ Optimize CSS
22:14:29 css.1  | [    1.03ms]   ↳ Write output

The initial startup takes 81 seconds. After that startup, everything seems responsive and changes to files result in:

22:15:42 css.1  | Done in 1ms
22:15:42 css.1  |
22:15:42 css.1  | [1.34ms] [@tailwindcss/cli] (watcher)
22:15:42 css.1  | [1.13ms]   ↳ Scan for candidates

Without watchman installed, though, startup is 1000x faster:

22:16:59 css.1  | Done in 71ms
22:16:59 css.1  |
22:16:59 css.1  | [71.90ms] [@tailwindcss/cli] (initial build)
22:16:59 css.1  | [12.04ms]   ↳ Setup compiler
22:16:59 css.1  | [26.72ms]   ↳ Scan for candidates
22:16:59 css.1  | [15.86ms]   ↳ Build CSS
22:16:59 css.1  | [ 1.23ms]   ↳ Optimize CSS
22:16:59 css.1  | [ 0.81ms]   ↳ Write output

@ChadMoran
Copy link

This was happening to me on Node v20.16.0 on macOS 15.3.2 with ARM. Upgrading to Node v22.14.0 resolved it.

@silva96
Copy link

silva96 commented Apr 1, 2025

This is happening to me in 22.14.0 too. 197% CPU usage always. I use mac m1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants