Transient read failure may cause permanent failure to watch file
Problem
V3.1.18 Tailwind CLI, Visual Studio 2022 as editor. Node v14.18.1 Chrome Window 10 (No Docker or WSL) This issue is a very close relative of #7759, but I think it might be quite specialised so I don't want to pollute that one. I have a rather odd web project, which has a single HTML file. So the content section of tailwind.config.js looks like this: [code block] I run a tailwind CLI watcher with a command like this: [code block] I am suffering from the problem described in #7759 where the watcher stops watching after a while - anywhere between almost immediately and after lots and lots of successful rebuilds. By using the "Process Monitor" utility to observe the filesystem activity on the index.html file, I have observed that when Visual Studio (devenv.exe) is saving index.html, it goes through a rename/replace process which means there is a window of time in which the index.html file does not actually exist. It appears that node.exe (i.e. Tailwind) sometimes tries to read the file during this window and finds it to be missing. This apparently causes Tailwind to stop watching that file. The blue selected line in the image is Node getting a file-not-found failure doing a CreateFile (it's actually an open-to-read) on index.html in the middle of devenv doing a rename dance. I think that's a smoking gun. If I change the content file specification to be a wildcard, then my first impression is that things are much more robust: [code block] So: 1. Is it possible/
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Modify Tailwind Watcher Configuration to Prevent Transient Read Failures
The Tailwind CLI watcher fails to detect changes in the index.html file due to a transient read failure caused by Visual Studio's file save operation. When Visual Studio saves the file, it temporarily renames it, leading to a window where the file does not exist. If the Tailwind watcher attempts to read the file during this window, it encounters a 'file not found' error, causing it to stop watching the file.
Awaiting Verification
Be the first to verify this fix
- 1
Change File Specification to Wildcard
Update the content section of your tailwind.config.js to use a wildcard for the HTML file. This allows Tailwind to watch for any changes in the directory, reducing the likelihood of missing the file during the rename process.
javascriptcontent: ['./*.html'] - 2
Increase Polling Interval
If the wildcard change does not resolve the issue, consider increasing the polling interval for the Tailwind watcher. This can be done by adding a `--poll` option to the Tailwind CLI command to reduce the frequency of file checks.
bashnpx tailwindcss -i ./input.css -o ./output.css --watch --poll 1000 - 3
Use a File Change Notification Library
Integrate a file change notification library that can handle transient file changes more gracefully. Libraries like Chokidar can be used to watch files and handle rename events without failing.
javascriptconst chokidar = require('chokidar'); const watcher = chokidar.watch('./index.html'); watcher.on('change', () => { // Trigger Tailwind rebuild }); - 4
Monitor File System Events
Utilize a monitoring tool to observe file system events and ensure that the Tailwind watcher is correctly responding to changes. This can help identify if the issue persists after implementing the above changes.
noneUse Process Monitor to track file access events.
Validation
To confirm the fix worked, run the Tailwind CLI watcher and make changes to the index.html file. Ensure that the watcher continues to rebuild without stopping after multiple changes. Monitor the file system events to verify that no 'file not found' errors occur during the save process.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep