DEV Community: ismailjosim

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

ismailjosim — Fri, 13 Mar 2026 17:38:44 +0000

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

এই 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"

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

npm install vite@latest

তাই 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"
  }
}

এরপর project install করো:

npm install

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"
    }
  }
}

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

✔ 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

এটা 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 ❤️🚀

Firebase Hosting Setup Complete Issue

ismailjosim — Thu, 18 Apr 2024 17:35:35 +0000

আপনার ফায়ারবেজ ওয়েবসাইট হোস্ট করার পরে যদি উপরের ইমেজের মতো ইস্যু দেখায় তাহলে নিচের স্টেপগুলো ফলো করেনঃ

১. প্রথমে কিছু ফাইল এবং ফোল্ডার ডিলিট করে দিবেনঃ .firebaserc, .firebase (folder), dist(folder), firebase.json

২. এরপরে firebase init কমান্ড দিয়ে নিচের স্টেপগুলো ফলো করেনঃ

1. `Are you ready to proceed? (Y/n)` 👉 Y

2. `কী-বোর্ডের down-arrow প্রেস করে **(Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys)** এরপরে স্পেস বাটনে ক্লিক করে সিলেক্ট করেন`

Use an existing project: আপনার React এ্যাপের জন্য যে প্রজেক্টটি ফায়ারবেজে বানিয়েছেন সেটা সিলেক্ট করেন

What do you want to use as your public directory?👉 dist/build

এখানে আপনি যদি vite ব্যবহার করেন তাহলে আপনার build ফোল্ডারের নাম হবে dist আর যদি CRA অথবা yarn ব্যবহার করেন তাহলে আপনার build ফোল্ডারের নাম হবে build.

Configure as a single-page app (rewrite all urls to /index.html)? (y/N) 👉 Y
Set up automatic builds and deploys with GitHub? (y/N) 👉 N
File build/index.html already exists. Overwrite?👉 Y

উপরে কমেন্টগুলো দেওয়ার পর আপনার প্রজেক্টে কয়েকটা ফাইল এবং ফোল্ডার এড হবে এবং আপনার টার্মিনালটা পরের কমান্ড দেওয়ার জন্য রেডি হবে।

৩। এই পর্যায়ে আপনার প্রজেক্টটা বিল করতে হবে তার জন্য npm run build দিয়ে Enter key প্রেস করেন।

৪। সর্বশেষে ফায়ারবেজে ডিপ্লয় করার জন্য firebase deploy কমান্ড দিয়ে Enter প্রেস করেন।

ডেপ্লয় শেষ হয়ে গেলে আপনাকে দুইটা লিংক প্রোভাইড করা হবে তার মধ্যে থেকে Hosting URL লিংকটা ওপেন করে চেক করেন।

যদি দেখেন একই দেখাচ্ছে তাহলে CTRL + SHIFT + R প্রেস করে আপনার ব্রাউজারের ট্যাব টাকে একটা হার্ড রিলোড দেন। সাধারণত উপরের প্রসেসটা ফলো করলে ফিক্স হয়ে যাবে। তবে মাঝেমধ্যে দুই থেকে পাঁচ মিনিটের মতো সময় নিতে পারে। এক্ষেত্রে দুই থেকে পাঁচ মিনিট অপেক্ষা করেন এর পরে আবার চেক করেন।

---------------------------- The End -----------------------------