CLI watch mode not working correctly when using visual studio

[tecxx]

What version of Tailwind CSS are you using?

TailwindCSS CLI: v3.2.1
Visual Studio: 2022 - Version 17.3.6

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

Visual Studio

What operating system are you using?

Windows 10

Describe your issue

the tailwind cli in watcher mode: tailwind.exe -i ./Styles/site.css -o ./wwwroot/css/site.css --watch --verbose
edit a .razor or cshtml file with Notepad++ and save the file - the watcher sees the change and rebuilds correctly

but when i open visual studio and edit the exact same file in vstudio, and save the file, nothing happens.
as you can see on the screenshot, notepad++ detects there is a change, but the tailwind cli tool does not

config:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./**/*.{razor,html,cshtml}"],
    theme: {
        extend: {},
    },
    plugins: [],
}

i then made a copy of a cshtml file in windows explorer, and noticed the watcher is not reacting on the new file as well. only when i restart the cli tool, edits in the new file trigger a rebuild. this made me investigate some more:
changing the configuration to
content: ["./Pages/*.*"],

and saving a .razor page in visual studio in this folder leads to this crash:

looks like visual studio is saving files via a temp file, and then renames it. this way the cli watcher doesn't see it anymore.
is this possible to fix? or is this just happening on my computer? :)

[pm64]

EDIT: I stepped back through each release, this appears to have started in 3.1.8.

I'm experiencing similar behavior.

From what I'm observing, if Visual Studio is used to edit any source file during a Tailwind CSS watcher session, the watcher does not rebuild in response to that change, and becomes oblivious to all subsequent changes, whether they took place in Visual Studio, Notepad++, or whatever (however -- in my case, even using the --verbose option, Tailwind CSS does not display any indication of an exception).

If you then terminate and re-start Tailwind CSS, the watcher's behavior returns to normal (rebuilding in response to changes made in Notepad++, for example), until Visual Studio is used to make another change.

Edit: @tecxx if this is a different problem than what you're experiencing, let me know and I'll move this to a new issue.

[JereKaplas]

I've also noticed similar things after updating to 3.2.0 (3.2.1 doesn't fix it either). Changes in Visual Studio don't seem to trigger rebuilding.

The same project in VS Code will trigger rebuilds on changes though.

[thepra]

I did update too and I'm having tailwindcss CLI just scanning and updating the output file the first time, then when I change something in Visual Studio 2022 it's as if nothing happened for the CLI.

Edit: Can confirm that 3.1.7 doesn't have this issue. Thanks @pm64

[krompaco]

We see the behavior after a while both with Visual Studio and VS Code and not only with dotnet. Changing back to 3.1.7 and all work as expected.

[1player]

I probably have the same issue in Emacs, so it's not fault of the editor.

[TunkShif]

Can confirm that there's something wrong with the tailwind cli watch mode in version 3.2.1, nothing related to editors.
I'm working with the phoenix framework and have tried using the stand-alone tailwindcss cli wrapper lib or using node to install tailwindcss and then running pnpm tailwindcss --input=css/app.css --output=../priv/static/assets/app.css --postcss --watch. Neither way works in version 3.2.1 but it works when switching to version 3.1.8.

[draganSm]

Sounds like the same issue I had (just added a fresh TW code to existing TS/next.js application). Using a dummy fix: in order to get the fresh changes, I'm saving unchanged tailwind.config.js file. A related post in SO: https://stackoverflow.com/questions/74240061/tailwind-doesnt-recognise-all-w-styles

[jbrocher]

I am experiencing the same issue using tailwindcss 3.1.2. My editor is neovim. I agree with @TunkShif tho, it doesn't seem editor related. Downgrading to 3.1.8 fixes the issue for me.

[thecrypticace]

Hey all, I merged a PR by @natrys that should fix these problems. If you could give the latest insiders build a test and report back here it would be much appreciated:

npm install tailwindcss@insiders

I've done some testing on my own and it appears that Visual Studio on Windows is finally working again and VIM on Linux (and WSL even) when it performs backups for saves.

Note: that WSL fs events are effectively broken under /mnt/{a,b,c,d,…} so you have to use --poll or be in a different, non-shared mount.

Gonna close as we believe the issue has been fixed but will re-open if there turns out to be more things we need to address w/ regards to the CLI watching.

[krizpoon]

Nothing worked. I ended up using fb-watchman to trigger the build process.