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

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

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 1
Comments: 28 (10 by maintainers)

Most upvoted comments

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

mrinx on Mar 7, 2022

@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

thecrypticace on Nov 10, 2022

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

carderne on Nov 10, 2022

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

robacarp on May 24, 2022

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));

mbaytas on Apr 20, 2022

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

javornikolov on Mar 7, 2022