tailwindcss in watch mode doesn't refresh outupt when files are changed using vim
Problem
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` using`vim`. - 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`
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Ensure TailwindCSS Watch Mode Refreshes with Vim Edits
The issue arises due to how Vim handles file modifications. When files are edited in Vim, the modification time may not be updated in a way that TailwindCSS's watch process recognizes, preventing it from triggering a rebuild. This can happen due to Vim's internal file handling and buffering mechanisms, which can lead to inconsistencies in file timestamps.
Awaiting Verification
Be the first to verify this fix
- 1
Configure Vim to Update Timestamps
Modify your Vim configuration to ensure that the file's modification time is updated correctly after saving. This can be done by adding the following line to your .vimrc file: `set backupcopy=yes`. This setting ensures that Vim updates the file's timestamp correctly.
bashecho 'set backupcopy=yes' >> ~/.vimrc - 2
Use Vim's 'write' Command
Instead of using the default write command, use `:w!` to force Vim to write the file and update the timestamp. This can help ensure that TailwindCSS detects the change.
vim:w! - 3
Implement a File Change Notification
Consider using a file change notification tool like `entr` to monitor changes in your source files. This can provide a more reliable trigger for TailwindCSS to rebuild. Install `entr` and run the following command in your project directory: `find src -name '*.css' -o -name '*.html' | entr -r npx tailwindcss --watch`.
bashfind src -name '*.css' -o -name '*.html' | entr -r npx tailwindcss --watch - 4
Test with Touch Command
If issues persist, manually trigger a file timestamp update using the `touch` command after editing files in Vim. This can help ensure TailwindCSS recognizes the changes.
bashtouch src/tailwind.css src/index.html - 5
Check TailwindCSS Configuration
Ensure that your TailwindCSS configuration is set up correctly to watch the appropriate files. Verify that the paths in your configuration match the structure of your project.
javascriptcat tailwind.config.js
Validation
To confirm the fix worked, modify the relevant CSS and HTML files using Vim, save them, and check if the output.css file updates correctly with the expected classes. You can also monitor the terminal output from TailwindCSS for any rebuild messages.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep