How to Fix Tailwind CSS Install Error in Vite (Quick Solution)
Are you getting an "npm ERR! code ERESOLVE" or peer dependency conflict when trying to install Tailwind CSS v4 with Vite 8 and React 19? In this quick tutorial, I will show you the exact fix to get your project running.
With the rapid evolution of the React ecosystem, using React 19 and Tailwind CSS v4 alongside the newest Vite 8 update often triggers an unexpected dependency error during installation.
The terminal usually outputs:
npm ERR! code ERESOLVE
npm ERR! unable to resolve dependency tree
Could not resolve dependency:
peer vite "^5.2.0 || ^6 || ^7" from @tailwindcss/[email protected]
⚠️ Why this happens:
This is a peer dependency conflict. The @tailwindcss/vite plugin expects Vite versions 5, 6, or 7. However, when you create a new React project using `npm install vite@latest`, it installs Vite 8. npm detects this version mismatch and halts the installation.
✅ The Recommended Solution (npm Overrides):
The cleanest way to solve this without breaking your dependencies is to use npm overrides. You simply tell npm to ignore the Vite version mismatch.
Add this overrides block to your package.json file:
"overrides": {
"@tailwindcss/vite": {
"vite": "$vite"
}
}
After adding that, simply run `npm install` again, and your Tailwind CSS setup will complete perfectly! This is an official npm feature that keeps your dependencies clean and future-compatible.
🔔 If this quick fix helped you, please SUBSCRIBE to RZV Frontend Lab for more web development problem-solving, React tutorials, and design tips!
💼 Let's Connect:
GitHub: https://github.com/rizvibr0