Tailwind CSS v4.x (@tailwindcss/oxide) native binary not installing on WSL2 / Win 11 Pro, postinstall script reports success but file is missing. #18427
-
|
Disclaimer: Problem Description: Environment Details: Operating System: Windows 11 running WSL2 with Ubuntu 22.04 LTS. WSL2 Kernel Version: 6.6.87.2-microsoft-standard-WSL2 Node.js Version: v20.19.3 (installed via nvm) npm Version: 10.8.2 @tailwindcss/oxide Version: 4.1.11 Steps to Reproduce: Ensure nvm is installed and nvm use 20 is active. Create a new empty directory: mkdir tailwind_test_isolated && cd tailwind_test_isolated Clean up: rm -rf node_modules package-lock.json Run install: npm install --save-dev --verbose tailwindcss @tailwindcss/postcss postcss autoprefixer up to date, audited 43 packages in 990ms 12 packages are looking for funding found 0 vulnerabilities Check for binary: ls -l node_modules/@tailwindcss/oxide-linux-x64-gnu/tailwindcss (results in "No such file or directory") Verbose npm install Output: npm verbose cli /home/xxx/.nvm/versions/node/v20.19.3/bin/node /home/xxx/.nvm/versions/node/v20.19.3/bin/npm added 2 packages, and audited 43 packages in 2s 12 packages are looking for funding found 0 vulnerabilities npm info run @tailwindcss/oxide@4.1.11 postinstall node_modules/@tailwindcss/oxide node ./scripts/install.js Additional Notes: "This issue has been reproduced across multiple project tries with both Node.js 20 LTS and Node.js 22." "Attempting to run node ./scripts/install.js directly within node_modules/@tailwindcss/oxide/ produces no output, even with set -x." PS:
|
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 1 reply
-
|
I'm not seeing any issues here installing on WSL2. The actual filename is The actual command you want to run in your directory is this: which should output something similar to this: What didn't work that led you to believe things aren't installed properly? |
Beta Was this translation helpful? Give feedback.
-
|
Hello dear thecrypticace, thanks a lot for taking a look into this matter, I really appreciate it! I totally agree with you regarding AI, it doesnt seem to understand whats going on - same as me. "it strongly indicates an underlying permissions issue, even if you believe you have ownership" I will come back to you as soon as I have found the exact reason and will tell you whether its
|
Beta Was this translation helpful? Give feedback.
-
|
Sorry in Advance for this very, very Long comment and thanks for your patience with me! Exact process: Running WSL2 without admin privileges
Running WSL2 from my Windows with admin privileges on the already set up WSL2-environment
I have now let Gemini sum up the knowledge gained from this issue and will simply copy&paste it here. Initial Assumption: File permissions: Perhaps some files were incorrectly owned by root, preventing esbuild from executing its necessary build/setup steps. Platform mismatch: A possibility that the esbuild binary being installed/cached was for the wrong architecture (e.g., Windows instead of Linux for WSL2), leading to execution failure. Observation that ruled out initial assumptions and led to deeper investigation: Root Cause Identified: Resolution Steps and Outcome: rm -rf node_modules .yarn/cache yarn.lock (from within the project directory) yarn cache clean --force (to clear any global Yarn cache entries, though the .yarn/cache removal was likely the critical step for Yarn Berry) yarn add -D vite @vitejs/plugin-vue tailwindcss postcss autoprefixer (to reinstall dependencies from scratch) After these steps, the "must be built" warning for esbuild no longer appeared, and the project proceeded to install and build correctly. Conclusion: |
Beta Was this translation helpful? Give feedback.
-
|
Ok, seems like most of it is sorted out now. After struggling again for hours, I have definetly learned a ton about the new environment. His answer is: I am now working on Tailwind getting applied to the Vue-App itself, this shouldn't be too much of an issue now though. This is definetly way more complex than I had imagined and my respect for people like you and your Team increases every day! ** I will paste the working process below. PS:
|
Beta Was this translation helpful? Give feedback.
-
|
Glad you got it worked out. Real quick note though. Since you're using v4 you're gonna want to change this: @tailwind base;
@tailwind components;
@tailwind utilities;to this: @import "tailwindcss";👍 |
Beta Was this translation helpful? Give feedback.
Ok, seems like most of it is sorted out now.
After struggling again for hours, I have definetly learned a ton about the new environment.
Finally, ChatGPT o4-mini-high was able to resolve all dependency-installation issues that were caused by recent refactorings etc.
His answer is:
**
Tailwind v4 split out its CLI
In v3 the tailwindcss package shipped both the PostCSS plugin and the tailwindcss binary (so npx tailwindcss init worked).
In v4 the binary lives in a separate package, @tailwindcss/cli, and the PostCSS integration was pulled into @tailwindcss/postcss.
Fix: install both packages (npm install -D @tailwindcss/cli @tailwindcss/postcss) and then run the init via the new CLI (or scaff…