Tailwind CSS কেন এত জনপ্রিয়? — Utility-First CSS এর শক্তি

দুই-তিন বছর আগেও বেশিরভাগ web developer Bootstrap ব্যবহার করতেন। এখন সেই জায়গা দখল করে নিয়েছে Tailwind CSS। কেন এই পরিবর্তন? Tailwind-এ এমন কী আছে?

Utility-First কী?

Traditional CSS-এ আমরা component-based class বানাই: .card, .btn-primary ইত্যাদি। Tailwind-এ প্রতিটি CSS property-র জন্য আলাদা class আছে: p-4 মানে padding: 1rem, text-blue-500 মানে নির্দিষ্ট নীল রঙ, flex মানে display: flex।

Tailwind-এর সুবিধা

১. Custom design সহজ: Bootstrap-এ সব site একই দেখায়। Tailwind-এ নিজের design system তৈরি করুন।

২. CSS ফাইল বাড়ে না: Tailwind শুধু যে classes ব্যবহার করা হয়েছে সেগুলোই production bundle-এ রাখে। File size ছোট থাকে।

৩. Responsive design সহজ: md:text-xl lg:text-2xl — এভাবে breakpoint prefix দিয়ে responsive করা যায়।

৪. Dark mode সহজ: dark:bg-gray-900 — এক class দিয়ে dark mode support।

৫. Context switching কম: HTML ও CSS ফাইলের মধ্যে যাওয়া-আসা কম করতে হয়।

Tailwind-এর সমালোচনা

অনেকে বলেন Tailwind HTML-কে messy করে দেয় — অনেক classes দেখলে কষ্ট লাগে। এটা ঠিক যে শুরুতে HTML verbose মনে হয়। কিন্তু VS Code-এর Tailwind IntelliSense extension ও component extraction দিয়ে এটা manage করা যায়।

Bootstrap vs Tailwind — কখন কোনটি?

Bootstrap: Rapid prototype, admin panel, যেখানে custom design দরকার নেই।

Tailwind: Custom design system দরকার, React/Next.js project, modern web app।

Tailwind শেখার পথ

প্রথমে Tailwind-এর core concepts শিখুন — spacing, colors, typography, flexbox, grid। তারপর Tailwind CSS documentation পড়ুন। এরপর একটি project বানান — একটি landing page বা portfolio site।

shadcn/ui — Tailwind-এর পরের ধাপ

shadcn/ui হলো Tailwind-এর উপর built একটি component library। Ready-made accessible components পাওয়া যায় যেগুলো নিজের code-এ integrate করা যায়। React project-এ এটি আজকাল অনেক জনপ্রিয়।