Shopify এবং TailwindCSS এর Terminal Command Combind

ওয়েব ডেভেলপমেন্ট জানুয়ারী ২০২৫ ব্যাচ
, , ,
1

Shopify এর থীম ডেভেলপ করার সময় যখন আমরা TailwindCSS ব্যবহার করি, তখন স্বাভাবিকভাবে দুইটা Terminal ওপেন করে দুইটাই চালু রাখতে হয়। যারা জন্য র‍্যাম বেশি খরচ হয়। এই সমস্যা থেকে বাচার জন্য আমরা দুইটা কমান্ডকে কম্বাইন্ড করে একটা Terminal এ ব্যবহার করতে পারি।

এইটার জন্য আমাদের একটা প্যাকেজ লাগবে concurrently। আমাদের প্রোজেক্ট ফোল্ডারের Terminal ওপেন করে ইন্সটল করে ফেলি। তারপর package.json ফাইলে একটা লাইন এড করতে হবে।

লাইন এড করার আগের কোডঃ

{
  "dependencies": {
    "@tailwindcss/cli": "^4.1.10",
    "tailwindcss": "^4.1.10"
  },
  "devDependencies": {
    "concurrently": "^9.1.2"
  }
}

লাইন এড করার পরের কোড

{
  "dependencies": {
    "@tailwindcss/cli": "^4.1.10",
    "tailwindcss": "^4.1.10"
  },
  "scripts": {
    "dev": "concurrently -k -n TAILWIND,SHOPIFY -c green,blue \"npm run tailwind\" \"npm run shopify\"",
    "tailwind": "npx @tailwindcss/cli -i ./tailwind/input.css -o ./assets/tailwind.css --watch",
    "shopify": "shopify theme dev"
  },
  "devDependencies": {
    "concurrently": "^9.1.2"
  }
}

Explanation:

  • -k: kills both processes if one exits
  • -n: names each process for clarity
  • -c: sets colors (green for Tailwind, blue for Shopify)
  • tailwind and shopify scripts run exactly as you’re doing manually

ফাইল সেভ করুন। এবং Terminal এ কমান্ড দিন npm run dev । কাজ শেষ।

1 Like