tailwindcss in watch mode doesn't refresh outupt when files are changed using vim

[javornikolov]

This is based on #7679 - the versions being used are listed there.

I ended up setting up test-case project here: https://github.com/javornikolov/tailwindcss-issue-7679
There is Github Actions CI job which outlines the changes I do to reproduce the issue. However the issue does't occur when running the automated scripts. It occurs when I manually edit the file using vim editor (doing the same changes).

vim version is 8.2

• The issue is not observed If I copy/paste files from template/* to src.
• The issue is (usually) not observed if I use other text editor - gedit. Or if I also touch files (using touch -m). (Sometimes touch doesn't help either - that's more subtle, I am not sure how to consistently reproduce yet.)

Sometimes refresh of output.css happens when I use vim too but it's quite rare (and is after some modifications of file outside of vim as well).

---

Steps to reproduce - based on the GithHub repo above:

• start tailwindcss --watch (e.g. via npx pm2 start ecosystem.config.js)
• Modify src/tailwind.css copy-pasting the content of templates/tailwind.css.2 usingvim.
• Similarly modify src/index.html (using index.html.2)
• What happens is that in output.css I only have btn-cool-1 but not btn-cool-2. I uploaded the state of the files to branch topic/after-change-using-vim in the same github repo. I included some stat outputs in case that matters.

If I switch the order of modifying tailwind.css and index.html and I edit index.html first - then nor btn-cool-1, nor btn-cool-2 are included

Hypothesys

I suspect that the way vim saves files has specifics which are not yet recognized as changes to source files. Perhaps it can be reproduced outside vim, I am just not fully aware in what exactly way yet. Some insights might be possibly found e.g. here: https://vi.stackexchange.com/questions/25030/vim-not-firing-inotify-events-when-writing-file

[mrinx]

Hey! Have you tried to set :set backupcopy=yes as mentioned in your Stack Exchange link? It seems like that should solve your issue.

[javornikolov]

Hey! Have you tried to set :set backupcopy=yes as mentioned in your Stack Exchange link? It seems like that should solve your issue.

Yes, indeed - backupcopy=yes seems to resolve the issue which I've described. This is the workaround which I am trying now: https://gist.github.com/nepsilon/003dd7cfefc20ce1e894db9c94749755

Yet, there is still this the possibility that source files get changed in some way that tailwindcss --watch does not recognize. Which makes me a bit uncertain when is the output css really in sync. I am not sure

[mbaytas]

I have had a similar problem while developing a Ghost theme with Tailwind, and solved it by tweaking the watchers in my gulpfile.

In my gulpfile, the line that configured the watcher for my Handlebars (HBS) templates looked like this:

const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], hbs);

This would execute the HBS task when I saved a change to my front end code. However, it did not execute the CSS task, which meant that my CSS file in which I was importing Tailwind was not re-processed properly.

See below:

function hbs(done) {
    pump([
        src(['./*.hbs', './partials/**/*.hbs']),
        livereload()
    ], handleError(done));
}

function css(done) {
    pump([
        src('assets/css/*.css', {sourcemaps: true}),
        postcss([
            easyimport,
            colorFunction(),
            tailwindcss(),
            autoprefixer(),
            // cssnano()
        ]),
        dest('assets/built/', {sourcemaps: '.'}),
        livereload()
    ], handleError(done));
}

I solved it by adding the CSS task into the callback of the HBS watcher:

const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], series(hbs, css));

[thecrypticace]

@javornikolov Am having trouble reproducing this in vim on a fresh install of Ubuntu 22. Could you provide some more detail about OS version and what not? I can't imagine hardware details would be relevant but are you perhaps editing files on an externally mounted drive — not sure if relevant but just looking for as much detail as I can get. I get rebuilds every time from your cloned project — at least in a virtual machine. I don't even have to set nobackupcopy to work around it.

I had the file system events and logs streaming while editing and nothing was out of the ordinary as far as I could tell. Vim was doing it's whole move, create, write, delete dance and the changes were picked up as expected.

[javornikolov]

@thecrypticace, it was ubuntu 21.10 by the time I reported the issue.
I will try again with Ubuntu 22.04 (I have recently upgraded to it). It is Intel platform. Somehow vim configuration mattered - the way it saves files and creates backups - I will give more details on that as well.

[robacarp]

I don't pretend to know details about how npx and tailwind work together, but I ran into this when launching tailwindcss via npx but not when it was installed to the system path. I'm on macos/m1, and set backupcopy=auto -- switching to set backupcopy=no did actually solve the issue too -- though I've been using that config with various file watchers for something like a decade without issue.

[javornikolov]

@thecrypticace ,
I managed to reproduce the issue with Ubuntu 22.04 (up-todate with latest updates now)
Kernel is Linux ubuntu 5.15.0-33-generic #34-Ubuntu SMP Wed May 18 13:34:26 UTC 2022 x86_64 x86_64 x86_64 GNU/Linux
Files are on local SATA hard drives using LVM2 and ext4 file system on top. The CPU is pretty old AMD Athlon(tm) 64 X2 Dual Core Processor 3800+.

Issue is reproduced with stock vim options - i.e. I removed my custom ~/.vimrc.

By tweaking the vim backup settings as I described above - the output file seems to be updated OK.

In case that matters, I open and edit the files in separate tabs in vim.

[marrs]

Hey! Have you tried to set :set backupcopy=yes as mentioned in your Stack Exchange link?

Shouldn't that be :set backupcopy=no? You want to edit the file in place if understand the explanation correctly.

[mrinx]

Shouldn't that be :set backupcopy=no? You want to edit the file in place if understand the explanation correctly.

I don't think so. My understanding is that in this case the backup copy yes/no refers to copying the original file as opposed to moving it; the backup happens nonetheless.

[robacarp]

My experience was that :set backupcopy=no resolved the issue. As with a lot of vim configuration docs aren't immediately obvious. This option dovetails with set backup/set nobackup.

From the vim docs:

'backupcopy' 'bkc'
'backupcopy' 'bkc' string (Vi default for Unix: "yes", otherwise: "auto")
global
{not in Vi}
When writing a file and a backup is made, this option tells how it's
done. This is a comma separated list of words.

The main values are:
"yes" make a copy of the file and overwrite the original one
"no" rename the file and write a new one
"auto" one of the previous, what works best

[rakaur]

I am having the same or similar issue. Rails 7 initially generated without css. Decided to switch to tailwind via tailwindcss-rails gem. I run a docker container that mounts my local version of the app as a volume, so changes are reflected in both, but the watcher seems to have issues after its been running for some time. Initially it will detect remote or local changes to either the config or the css file, but after some time it just stops noticing changes to the config. It works locally, so I'm not sure whether this is some weird docker issue. I do use alpine and I did add gcompat but I never had the no such file issue. I do have tty: true in docker-compose.yml.

It's hard to replicate. I can never tell how long it has to be running before it happens. Sometimes its right after the initial build, and it won't notice anything at all. Other times it works for hours before suddenly stopping, which is infuriating because it initially took me some time to realize the problem.

It doesn't seem to matter if it's being saved by an editor or touch or whatever.

[willdean]

I'm too am currently struggling with 3.1.8 CLI on Windows just quietly stopping recognising updates - it does seem to make some difference using the -p polling option, but it still breaks every so often.

My suspicion (guess) is that it's occasionally failing to read modified files, because something else briefly locks them (there is lots of file-watching hot-reload stuff going on outside Tailwind which means several processes race to read modified files), and then once it's had that kind of error the file-watcher is permanently broken.

This has not been a problem on the much, much larger project I started using TW on, which adds to my suspicion that it's timing-related. On the tiny project I'm working on right now it's verging on the unusable, because one has to constantly keep checking that the TW cli is still working.

I cannot find any kind of logging / verbose mode which gives any evidence to support this theory.

[thecrypticace]

@willdean

1. Are you able to provide a reproduction that I can test with?
2. Are you using Docker (if so Windows or Linux containers; if Linux is it backed by WSL?), WSL, or just native Windows?
3. What editor are you using?

[willdean]

Thanks @thecrypticace

1. I can't give you the whole project but I could give you the single HTML file and the tailwind-relevant bits, perhaps
2. No, it's just Windows 10, no Docker or WSL
3. Visual Studio (with Resharper), and then I'm running dotnet watch (from .net 6.0.400 SDK) on another command line which is doing file-watching and browser hot-reload (My suspicion is that if there is a racing problem then it will be dotnet watch which is racing TW.)

I discovered after my last message that I could set DEBUG=* as an environment variable which prints out some more stuff from TW, but no errors when it stops watching.

I could log file-system activity (with Procmon) and see if I can see some contention - it might be more efficient for me to try that here than for you to spend ages trying to repro this. If there is any other diagnostics I can enable in Node/TW do let me know - I am not a Node person at all so may be overlooking some very obvious stuff.

[thecrypticace]

Yeah there aren't any more diagnostics other than DEBUG=* right now. I have a Win 10 machine and can fiddle around some today to see if I can repro but yeah I'm not sure that I'd be able to with a single file. Whole projects work best. In a case like this I'd end up fiddling around in the built source code of the CLI to add more logging and tweaking things.

I'll look over the code and stuff though to see if anything stands out at me.

[thecrypticace]

I just merged a fix that may help here but I'm not certain if it will. Could someone give the insiders build a try to see if it works reliably (npm install tailwindcss@insiders)? It would be really appreciated!

[michaeljones]

This was sending me relatively mad until I stumbled across this. Thanks so much for reporting it. I am using tailwind 3.2.0 and still seeing this issue. I used to have backupcopy set but have recently trimmed down my vim config. I've reinstated it so I'm fine but, gosh, that was deeply puzzling.

[thecrypticace]

@michaeljones Are you on Tailwind v3.2.2?

[michaeljones]

@thecrypticace I was on 3.2.0 through the Elixir/Phoenix tailwind set up. From a quick test, it still fails with 3.2.2 though unless I have set backupcopy=yes.

[n1ghtmare]

This drove me up the wall. It's good that I found this thread. I would like to report that this issue is still occurring in 3.2.2. (was fine in 3.1.8 for me). I also tried npm install tailwindcss@insiders and the issue remains. Maybe this should be re-opened? @thecrypticace

[willdean]

@n1ghtmare What OS/editor are you using?

[n1ghtmare]

Hi sorry, I use Neovim v0.8.0 on Arch Linux. As I noted, this worked just fine in version 3.1.8. Let me know if you need any more info, or if I can be of any help at all.

[carderne]

Also having this issue, using any editor (including sed).

OS: Ubuntu 22.04
Node: v16.18.1
npm: 8.19.2
TailwindCSS: 3.2.3

Minimal reproduction here: https://github.com/carderne/tailwind-watch-issue

[thecrypticace]

@carderne Thanks! Will take another look today!

[thecrypticace]

@carderne Yep, I can reproduce this in Linux — but not macOS. I think there's a difference in the order of events that still causes the bug to happen in some cases.

[thecrypticace]

@carderne I merged in another fix. It appears to work for me on Linux. Would you mind giving the insiders build a test? npm install tailwindcss@insiders

[carderne]

Yup, works for me!

[nickjj]

I know this is old news but wanted to confirm that it's also working for me too. 3.2.1 never updated with --watch and 3.2.4 always updates with --watch when using Vim 8.2 inside of WSL 2 (native Linux). The 3.1.X releases all worked previously.