Tailwind CLI slow down / memory leak
Problem
What version of Tailwind CSS are you using? v3.0.22 What build tool (or framework if it abstracts the build tool) are you using? None What version of Node.js are you using? v17.0.1 What browser are you using? N/A What operating system are you using? Windows 10 Reproduction URL https://github.com/FallDownTheSystem/tailwind-cli-slowdown Describe your issue After saving a file in the root folder, that triggers a rebuild by the Tailwind CLI watcher, while the rebuild is still in progress, I think some kind of memory leak happens. The reproduction requires a file to be saved very rapidly to showcase it, but on larger projects, it can happen naturally, as the build times are longer to begin with. I'll paste the reproduction steps and explanation I added to the README.md of the minimal reproduction demo here. I've also attached a video that showcases the behavior. https://github.com/FallDownTheSystem/tailwind-cli-slowdown 1. `npm install` 2. `npm run watch` 3. Spam save ./folder/noonroot.aspx or ./folder/nonroot2.aspx (On Windows you can hold down ctrl + save to rapidly save the file) 4. Spam save ./root.aspx for a long while 5. Try to spam save one of the nonroot.aspx files again The CLI now gets "stuck" on adding the rebuild step to the promise chain faster than it can process then, making the chain longer and longer. Once you stop spamming save, the chain will unwind and all the rebuilds will complete. But now each time you attempt to save, the process allocates
Error Output
exception and the node process will crash.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Optimize Tailwind CLI Watcher for Memory Management
The Tailwind CLI watcher is not handling rapid file changes efficiently, leading to a buildup of pending rebuild promises. This causes excessive memory usage and can eventually crash the Node.js process due to unhandled exceptions. The issue is exacerbated by the Node.js version and the way promises are queued in the event loop.
Awaiting Verification
Be the first to verify this fix
- 1
Upgrade Node.js
Upgrade Node.js to a stable LTS version (e.g., v18.x or v16.x) to benefit from performance improvements and better memory management.
bashnvm install 18 - 2
Limit File Watcher Events
Modify the Tailwind CLI configuration to limit the number of rebuilds triggered by rapid file saves. This can be done by introducing a debounce mechanism in the watcher script.
javascriptconst debounce = (func, delay) => { let timeout; return (...args) => { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), delay); }; }; - 3
Increase Memory Limit
Increase the Node.js memory limit to handle larger projects by running the CLI with a higher memory allocation. This can prevent crashes due to memory exhaustion.
bashnode --max-old-space-size=4096 node_modules/.bin/tailwindcss -i ./src/input.css -o ./dist/output.css --watch - 4
Monitor Memory Usage
Use tools like `node --inspect` or `clinic.js` to monitor memory usage and identify any potential leaks during the rebuild process.
bashnode --inspect node_modules/.bin/tailwindcss -i ./src/input.css -o ./dist/output.css --watch - 5
Test with Smaller Changes
After applying the above changes, test the Tailwind CLI with smaller, incremental changes to files instead of rapid saves to ensure stability and performance improvements.
Validation
Confirm the fix by running the Tailwind CLI watcher after implementing the steps. Monitor memory usage and ensure that the process does not crash during rapid file saves. Additionally, check that rebuild times are reduced and that the CLI remains responsive.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep