DEV Community

Cover image for Tailwind CSS v4 Install Error in Vite 8 (React 19) – Complete Fix
ismailjosim
ismailjosim

Posted on

Tailwind CSS v4 Install Error in Vite 8 (React 19) – Complete Fix

#react #ai #vite #tailwindcss

React ecosystem খুব দ্রুত evolve হচ্ছে। বিশেষ করে React 19 এবং Tailwind CSS v4 একসাথে ব্যবহার করতে গেলে মাঝে মাঝে unexpected dependency error দেখা যায়। যেমন রিসেন্ট Vite ভার্সন আপডেট ৮ আসার পরে tailwindcss v4 install করার সময় নিচের মত error দেখায়।

npm ERR! code ERESOLVE
npm ERR! unable to resolve dependency tree

Found: vite@8.0.0

Could not resolve dependency:
peer vite "^5.2.0 || ^6 || ^7" from @tailwindcss/vite@4.2.1
Enter fullscreen mode Exit fullscreen mode

এই error টা basically বলছে:

Package Required Version
Tailwind Vite Plugin Vite 5 / 6 / 7
Your Project Vite 8

Why This Error Happens

এটা বোঝার জন্য আমাদের npm dependency system বুঝতে হবে।

peer dependency মানে package টি expect করে যে project এ একটা নির্দিষ্ট version থাকবে।

এখানে:

@tailwindcss/vite → peer vite "^5.2.0 || ^6 || ^7"
Enter fullscreen mode Exit fullscreen mode

কিন্তু আমাদের বর্তমান vite যেহেতু version 8 দিয়ে react project ক্রিয়েট করে নিচের কমান্ডের মাধ্যমে:

npm install vite@latest
Enter fullscreen mode Exit fullscreen mode

তাই npm conflict detect করে install বন্ধ করে দেয়।

?? তো এর সমাধান কি?

Solution 1 (Recommended): Use npm Overrides

এটাই সবচেয়ে clean solution।

তুমি package.json এ overrides ব্যবহার করে npm কে বলবে:

"vite version mismatch ignore করো"

package.json 

"overrides": {
  "@tailwindcss/vite": {
    "vite": "$vite"
  }
}
Enter fullscreen mode Exit fullscreen mode

এরপর project install করো:

npm install
Enter fullscreen mode Exit fullscreen mode

Full Example package.json 

{
  "name": "basic-react-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },

  "dependencies": {
    "@tailwindcss/vite": "^4.2.1",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
    "tailwindcss": "^4.2.1"
  },

  "devDependencies": {
    "@vitejs/plugin-react": "^6.0.0",
    "vite": "^8.0.0"
  },

  "overrides": {
    "@tailwindcss/vite": {
      "vite": "$vite"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

আপাতত এটাই বেটার সলিউশন বলা যেতে পারে। কারনঃ

✔ npm official feature
✔ future compatible
✔ dependency clean থাকে

Solution 2: Quick Install Using Legacy Peer Deps

আরেকটা quick fix আছে।

npm install tailwindcss @tailwindcss/vite --legacy-peer-deps
Enter fullscreen mode Exit fullscreen mode

এটা basically npm কে বলে:

peer dependency check ignore করো

Pros

✔ দ্রুত install হয়
✔ manual edit লাগে না

Cons

❌ dependency issues hidden থাকতে পারে
❌ production এ risky

Comparison of Two Solutions

Method Stability Recommended
overrides High ✅ Yes
legacy-peer-deps Medium ⚠ Temporary

Production project হলে overrides method best practice।

Final Thoughts

React ecosystem খুব দ্রুত evolve হচ্ছে। তাই মাঝে মাঝে Tailwind CSS v4 install error vite 8 এর মত dependency conflict দেখা যায়।

অনেক developer যখন React project এ Tailwind CSS v4 install করতে যায়, তখন npm dependency conflict এর কারণে installation fail হয়। এই ব্লগে এই ব্যাপার টাই আপাতত একটা সলিউশন দেওয়ার চেষ্টা করা হয়েছে।

আশা করা যায় tailwind খুব দ্রুত update এর মাধ্যমে এই ইস্যুটা ফিক্স করে ফেলবে। তখন এই ইস্যু আর ফেইস করতে হবে। আপাতত ২টা সলিউশন থেকে যেকোন একটা দিয়ে আপনার প্র্যাকটিস চালিয়ে যান।

Hope that might help with your coding journey. best of luck ❤️🚀

Top comments (0)