সবাই কেন Tailwind CSS v4 নিয়ে লড়াই করছে তার আসল কারণ

Tailwind CSS v4 নিয়ে বিতর্ক এখন সর্বত্র। বেশিরভাগ মানুষ ভুল বিষয় নিয়ে তর্ক করছেন।

আসল প্রশ্নটি utility classes বনাম inline styles নিয়ে নয়। প্রশ্নটি হলো আপনার styling কোথায় থাকছে এবং এর মানসিক শ্রম (mental cost) কার ওপর পড়ছে।

Tailwind v4 কনফিগারেশনকে আপনার CSS ফাইলের ভেতরে নিয়ে আসে। আপনি JavaScript config ফাইলের পরিবর্তে @theme ব্যবহার করেন। এটি কাজের ধারা বা workflow-কে আরও পরিচ্ছন্ন করে তোলে।

কিন্তু এটিই বিতর্কের মূল কারণ নয়। বিতর্কটি তৈরি হয়েছে কারণ v4 দুটি ভিন্ন প্যাটার্ন ব্যবহার করা সহজ করে তুলেছে।

প্যাটার্ন ১: আপনার কম্পোনেন্টে Utility classes। আপনি সরাসরি আপনার HTML বা JSX-এ ক্লাস লিখছেন। এটি আপনাকে স্পষ্টভাবে জানায় একটি এলিমেন্ট দেখতে কেমন।

প্যাটার্ন ২: @apply পদ্ধতি। আপনি একটি CSS ফাইলে .alert বা .alert--error এর মতো semantic ক্লাস তৈরি করেন। এটি আপনাকে জানায় একটি এলিমেন্ট আসলে কী।

উভয় পদ্ধতিই কার্যকর। কোনোটিই ভুল নয়। তারা ভিন্ন ভিন্ন দর্শন অনুসরণ করে।

Group A বিশ্বাস করে co-location-এ। সবকিছু এক জায়গাতেই থাকে। Group B বিশ্বাস করে semantic নামের ওপর। তারা এমন নাম চায় যা কাজের উদ্দেশ্য বর্ণনা করে।

যখন একজন ডিজাইনার এরর কালার (error color) লাল থেকে কমলা করেন, তখন Group A কোড ফাইলগুলোর মধ্যে খুঁজতে থাকে। Group B একটি CSS ফাইলের মাত্র একটি লাইন পরিবর্তন করে।

Tailwind v4 @apply পদ্ধতিকে আরও স্বাভাবিক করে তোলে। এটি উত্তেজনা বা টানাপোড়েন আরও বাড়িয়ে দেয়।

আপনার টিমের আকার অনুযায়ী কীভাবে বেছে নেবেন তা নিচে দেওয়া হলো:

  • ছোট টিম: Utility classes ব্যবহার করুন। আপনাকে ক্লাস নাম দেওয়ার জন্য সময় নষ্ট করতে হবে না। সবাই যখন একই ফাইলে কাজ করে, তখন কাজ দ্রুত হয়।

  • কম্পোনেন্ট লাইব্রেরি: @apply বা CSS variables ব্যবহার করুন। আপনার ব্যবহারকারীদের আপনার অভ্যন্তরীণ design tokens সম্পর্কে জানার প্রয়োজন নেই।

  • বড় কোম্পানি: একটি hybrid মডেল ব্যবহার করুন। একটি design system টিমকে semantic ক্লাসগুলোর দায়িত্ব দিন। অ্যাপ্লিকেশন ডেভেলপারদের দ্রুত লেআউটের জন্য utilities ব্যবহার করতে দিন।

শুধুমাত্র লম্বা ক্লাস স্ট্রিং পড়া এড়ানোর জন্য @apply ব্যবহার করবেন না। এটি কোনো কৌশল নয়; এটি কেবল এড়িয়ে চলা।

সবচেয়ে কড়া সমালোচকরা প্রায়ই ফ্রেমওয়ার্কের বদলে তাদের টুলসের বিরুদ্ধে লড়াই করেন। যদি আপনার এডিটরে IntelliSense না থাকে বা আপনার টিমে কোনো design token system না থাকে, তবে কাজের ধারাটি অগোছালো মনে হবে।

ফ্রেমওয়ার্ককে দোষ দেওয়ার আগে আপনার কাজের ধারা বা workflow ঠিক করুন।

Tailwind v4 একটি শক্তিশালী রিলিজ। এর CSS-first কনফিগারেশন আরও উন্নত। এই বিতর্কটি কেবল একটি লক্ষণ যে টিমগুলোর স্পষ্ট সিদ্ধান্ত নেওয়া প্রয়োজন।

একটি সিদ্ধান্ত নিন। সেটি ডকুমেন্ট করুন। তারপর এগিয়ে যান।

আপনার টিমের পদ্ধতি কী? আপনি কি utility classes নাকি @apply ব্যবহার করেন?

উৎস: https://dev.to/enjoy_kumawat/the-real-reason-everyones-fighting-about-tailwind-css-v4-4o0g