Watching inputs does not function properly

[maltoe]

Hi all :wave:

Sorry for the undescriptive bug title, I'm not exactly sure about the root cause of this bug, I've only observed its relatively strange behaviour, which manifests in multiple ways.

What version of Tailwind CSS are you using?

tailwindcss v3.3.2

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

None, see below

What version of Node.js are you using?

Not using node

What browser are you using?

n/a

What operating system are you using?

Linux

Reproduction URL

https://github.com/maltoe/tailwind-input-watcher-bug

Describe your issues

• When the content option contains any files, the input files aren't watched properly anymore. Please see repository above. ^^
• I had this MWE repository ready, when I discovered that it also doesn't work when content is empty, but main.css is in a parent directory (--input ../main.css from some-dir).

Again, I apologize for this odd bug report. I've spent about 2 hours on it now, and continue to find situations where it breaks my expectations of tailwind's behaviour. Got to stop now. I'm relatively confident though that this does not work as expected, as I would expect the main.css to be watched under any circumstances. I'd suspect the bug to be somewhere around here, but not sure. TS is not my first language, and I'm also not usually involved with tailwind / CSS much.

Let me emphasize though, that this bug is present in freshly generated Phoenix v1.7.5 projects, i.e. changes to app.css do not cause the watcher to trigger. Maybe of importance, as I think you're friends with the Phoenix people.

Hope this report helps regardless of its non-descriptiveness, malte

[thecrypticace]

Hey! If this isn't working it's definitely a bug. However, I'm not able to reproduce on macOS. I see you're using Linux. Can you provide details on what version of Linux you're using so I can do some testing?

The input files are set up in a way that is supposed to be unconditionally watched in the CLI: https://github.com/tailwindlabs/tailwindcss/blob/eae2b7a3f4f3a2981614a580a9f5534b9ffe0586/src/cli/build/plugin.js#L430 https://github.com/tailwindlabs/tailwindcss/blob/eae2b7a3f4f3a2981614a580a9f5534b9ffe0586/src/cli/build/watching.js#L224

I've tested both the CLI via npm and the standalone CLI that Phoenix uses.

[maltoe]

Hey @thecrypticace

Just to make sure, I've generated yet another fresh Phoenix project, as I realized 1.7.6 is out. It definitely does not work on my machine.

Steps I did

• mix archive.install hex phx_new
• mix phx.new --no-ecto
• mix phx.server
• edit the app.css
• -> no recompilation

Versions

• phoenix 1.7.6
• uses tailwind 3.2.7, but updating to 3.3.2 does not change anything
• I'm on Ubuntu 22.04.2 LTS

Any other software of interest? I'm not sure what chokidar uses for fs monitoring, whether it's kqueue or inotify.

[joeypohie]

Potential related Issues / PRs:

• Issue #10484: This issue reports a problem with the --watch flag not working properly in the tailwindcss CLI. The issue creator provides details about their setup and steps to reproduce the issue. This issue is relevant because it discusses a similar problem with the watch mode not triggering rebuilds.

This message was generated by AI from www.triagetickets.com

[tcoopman]

Hi @maltoe,

I've just tested this on linux with phoenix 1.7.6 and everything seems to work fine. Some questions:

1. mix phx.new --no-ecto is not correct, you provided some application name I expect? Like mix phx.new --no-ecto foo
2. what app.css are you changing? You need to edit assets/css/app.css

[maltoe]

Hello @tcoopman

thanks for looking into this. Here's a screen recording to prove it does not work on my machine (and to answer your questions): https://asciinema.org/a/593502

I'd be happy to provide any additional information about my system, be it installed packages, kernel info, etc. pp.

[tcoopman]

@maltoe can you verify that tailwind is actually running? Like with ps -aux | grep tailwind.

Also how does the output look like if you change the version of tailwind in the config. Do you see something like this: [warning] Outdated tailwind version. Expected 3.3.1, got 3.2.7. Please runmix tailwind.installor update the version in your config files.

[maltoe]

@tcoopman I learned something today. When I touch the app.css instead of using vim to edit it, everything works as expected. Turns out this is a well-known disadvantage of vim's default save mode, see for example this stackexchange thread. Setting backupcopy=yes also makes the watcher work as expected

I'm sorry I caused so much work and confusion :see_no_evil: Thanks again for your help!

[maltoe]

Still wondering why it does work for any of the files in the content array though (e.g. any heex template in Phoenix). Do you listen to updates of their parent directories by any chance?