tailwindcss CLI --watch flag does not work

[jakemauer]

What version of Tailwind CSS are you using?

v3.2.4 (The issue occurs both with the CLI installed via NPM and downloaded as a standalone MacOS binary.)

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

No build tools used.

What version of Node.js are you using?

16.15.1

What browser are you using?

Chromium 109.0.5414.119

What operating system are you using?

MacOS Ventura 13.2 on Intel 64-bit

Reproduction URL

https://github.com/jakemauer/tailwind-bug-reproduction

Describe your issue

I've been trying to use the tailwind CLI --watch flag to work on a simple single-file HTML page. However I have to restart the tailwindcss command every time I add a new tailwind classname to my HTML file as the CLI doesn't seem to be watching or responding to changes to the file. I constructed a sample repo based on the installation instructions and watching for changes even in that simplified setup doesn't work. For example, adding the class 'columns-2' to the body tag does not trigger a recompilation of the CSS until I close and re-run the taildwindcss command.

The command I'm using is: npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch and I am running it from the root of the project I've linked above.

I've tried using both the NPM-installed Tailwind binary and the MacOS binary from the releases page but neither seems to watch for changes properly.

Thank you, I appreciate your work and time in taking a look at this.

[thecrypticace]

Hey! I'm not seeing issues here with your reproduction and using the command provided with Node v16.15.1. I am however not yet on Ventura which might be the culprit. If you're having problems with the macOS binary and the node script that sounds like fsevents (the macOS process that mediates file system events) isn't delivering events. But that seems to be super unlikely. I'll upgrade my machine tomorrow to do some testing (I've been meaning to do this had just been holding off).

Can you provide the full path to the directory you are testing in? I've seen problems previously with characters like commas, dots, and parenthesis causing issues with glob paths which ends up breaking file watching.

[jakemauer]

Dropbox is the culprit. The path I'm working from is in Dropbox and thus the full path is /Users/jake/Dropbox (Personal)/tailwind-bug-reproduction. Putting the same files in a non-Dropbox directory fixes it. Even changing the test repo's folder to have spaces in it still works.

Interestingly I had been using fswatch as a workaround in the meantime, and that has been behaving ok when watching the same html files in the dropbox path.

[jakemauer]

I didn't even think to consider the dropbox path as an issue as live-server, an NPM package I'd been using for live-reload of the site, also had worked ok inside the dropbox folder.

[thecrypticace]

I have a feeling it's the parens in the path but I swear we'd already fixed that. I'll take a look in the morning. I've also got Dropbox so if there's something weird going on there I'll test that as well. Thanks for the investigation!

[jakemauer]

Your feeling was right I think. If my path is /Users/jake/projects/static-site, --watch works. If the path is /Users/jake/projects/static (site) it doesn't.

[thecrypticace]

Ah, yep confirmed here. I swear I had fixed this already but apparently not. Thanks for figuring this one out. I'll see what it takes to get a fix implemented for this.

[thecrypticace]

Following up here. It seems there is a bug in Chokidar itself that is causing these issues. We already do the proper escaping. No amount of escaping or unescaping works around this from what I've tested. I've added this to our internal backlog to investigate alternatives to Chokidar. Unfortunately this means that the only workaround at the moment is to not use a path with parens in it. Sorry :(

[jakemauer]

That's ok! Understanding what causes the problem and having a workaround is really all I can ask for.

[SergePlaski]

I can confirm the same problem with Tailwind CSS 3.4.3 --watch option. After extensive experimenting with file names and paths it seems that parens in the path still causing it!