Tailwind হেল্পার ওয়েবপৃষ্ঠার যেকোনো এলিমেন্ট ইনস্পেক্ট করে এবং এর সাথে সামঞ্জস্যপূর্ণ Tailwind CSS ইউটিলিটি ক্লাসগুলোর একটি বিস্তারিত ও ক্যাটাগরাইজড ব্রেকডাউন জেনারেট করে। এটি কেবল একটি সাধারণ ক্লাস স্ট্রিং নয়, বরং ফলাফলগুলোকে বিভিন্ন ক্যাটাগরিতে (যেমন লেআউট, স্পেসিং, টাইপোগ্রাফি, কালার, বর্ডার এবং ইফেক্টস) সাজিয়ে দেখায়, যাতে আপনি ঠিক বুঝতে পারেন কোন ক্লাসটি কী নিয়ন্ত্রণ করছে।
'Copy as Tailwind' যেখানে আপনাকে পেস্ট করার জন্য একটি দ্রুত ক্লাস স্ট্রিং দেয়, সেখানে 'Tailwind Helper' হল আরও বিস্তারিত বিশ্লেষণের সঙ্গী। এটি সেই ডেভেলপারদের জন্য তৈরি যারা Tailwind-এর ভাষায় কোনো এলিমেন্টের পূর্ণাঙ্গ স্টাইল কম্পোজিশন বুঝতে চান। প্রতিটি কম্পিউটেড CSS প্রপার্টিকে এর সমতুল্য Tailwind ক্লাসে ম্যাপ করা হয়েছে এবং লজিক্যাল ক্যাটাগরিতে গ্রুপ করা হয়েছে। আপনি এক নজরে দেখতে পারবেন যে একটি এলিমেন্ট flex লেআউট ব্যবহার করছে items-center অ্যালাইনমেন্ট সহ, এতে p-5 প্যাডিং আছে এবং চাইল্ড এলিমেন্টগুলোর মাঝে gap-3 আছে, টাইপোগ্রাফির জন্য text-lg font-bold ব্যবহার করা হয়েছে এবং এর আউটলুক bg-slate-900 rounded-lg border border-slate-700। কেবল একটি নির্দিষ্ট ক্লাস কপি করতে সেই ক্লাস ট্যাগে ক্লিক করুন, অথবা সম্পূর্ণ স্ট্রিংটি পেতে "Copy All" ব্যবহার করুন। ক্যাটাগরাইজড ভিউ সবকিছু কপি করার পরিবর্তে ঠিক আপনার প্রয়োজনীয় ক্লাসটি বেছে নেওয়া সহজ করে তোলে।
Tailwind ক্লাসগুলো পরিষ্কার ক্যাটাগরিতে সাজানো থাকে: লেআউট (flex, grid, position), স্পেসিং (padding, margin, gap), টাইপোগ্রাফি (font size, weight, color), কালার (background, text, border), বর্ডার (radius, width, style) and ইফেক্টস (shadow, opacity, transform)। প্রতিটি ক্যাটাগরি কোলাপ্সিবল এবং পরিষ্কারভাবে লেবেল করা।
যেকোনো এলিমেন্টে ক্লিক করুন — বোতাম, কার্ড, হেডিং, ইনপুট বা কন্টেইনার — এবং প্যানেলটি সাথে সাথে পূর্ণাঙ্গ Tailwind ক্লাস ব্রেকডাউন দিয়ে পূর্ণ হয়ে যাবে। এলিমেন্টটি একটি বেগুনী রঙের বর্ডার দিয়ে হাইলাইট করা হয় যাতে আপনি ঠিক বুঝতে পারেন কোনটি ইনস্পেক্ট করা হচ্ছে।
প্রতিটি Tailwind ক্লাস একটি ক্লিকযোগ্য ট্যাগ হিসেবে প্রদর্শিত হয়। আপনার ক্লিপবোর্ডে কেবল সেই ক্লাসটি কপি করতে যেকোনো একটি ট্যাগে (যেমন p-5 বা font-bold) ক্লিক করুন। একটি সূক্ষ্ম "copied" অ্যানিমেশন আপনার অ্যাকশন নিশ্চিত করবে। এটি তখন নিখুঁত যখন আপনার কেবল একটি বা দুটি নির্দিষ্ট ক্লাসের প্রয়োজন হয়।
নিচের "Copy All Classes" বোতামটি সব Tailwind ক্লাসের একটি পরিষ্কার, স্পেস-সেপারেটেড স্ট্রিং জেনারেট করে এবং সেটি আপনার ক্লিপবোর্ডে কপি করে। সরাসরি className="..." বা class="..."-এ পেস্ট করার জন্য প্রস্তুত।
প্রতিটি ভ্যালু Tailwind-এর ডিফল্ট স্পেসিং এবং সাইজিং স্কেলে ম্যাপ করা হয়েছে। একটি ১৬px ফন্ট text-base হিসেবে, ২৪px প্যাডিং p-6 হিসেবে এবং #7c3aed কালার purple-600 হিসেবে ম্যাপ হয়। যখন হুবহু কোনো মিল পাওয়া যায় না, তখন স্কেলের নিকটতম ভ্যালুটি বেছে নেওয়া হয় এবং সেটি উল্লেখ করা হয়।
প্যানেলে যেকোনো Tailwind ক্লাস ট্যাগের ওপর হোভার করে সেই অরিজিনাল কম্পিউটেড CSS ভ্যালুটি দেখুন যেখান থেকে এটি জেনারেট করা হয়েছে। যেমন, "p-5"-এর ওপর হোভার করলে "padding: 20px" দেখায়। এই টু-ওয়ে ভিউ ক্লাসগুলোকে বাস্তব CSS ভ্যালুর সাথে সংযুক্ত করে আপনাকে Tailwind স্কেল শিখতে সাহায্য করে।
Tailwind হেল্পার (Tailwind Helper) covers the following, organized by category:
flexgridblockinline-flexrelativeabsolutestickyitems-centerjustify-betweengap-*p-* (padding)m-* (margin)px-* py-*mx-autospace-x-*w-* h-*max-w-*min-h-*text-sm / text-base / text-lgfont-normal / font-boldleading-* (line-height)tracking-* (letter-spacing)text-centeruppercasetext-{color}-{shade}bg-{color}-{shade}border-{color}-{shade}opacity-*borderborder-2rounded-* (radius)border-solid / dasheddivide-*shadow-sm / shadow-md / shadow-lgring-*transitionduration-*hover:*একটি সাধারণ ক্লাস স্ট্রিংয়ের বিপরীতে, ক্যাটাগরাইজড ভিউ আপনাকে একটি এলিমেন্টের পূর্ণাঙ্গ কম্পোজিশন বুঝতে সাহায্য করে। দেখুন যে একটি কার্ড flex লেআউট, নির্দিষ্ট প্যাডিং, বোল্ড টাইপোগ্রাফি, স্লেট ব্যাকগ্রাউন্ড, রাউন্ড বর্ডার এবং সূক্ষ্ম শ্যাডো ব্যবহার করে — প্রতিটি দিক তার নিজস্ব সেকশনে।
যেকোনো ওয়েবসাইটে সুন্দরভাবে ডিজাইন করা কোনো এলিমেন্ট ইনস্পেক্ট করুন, তারপর প্রাসঙ্গিক ক্যাটাগরি ক্লাসগুলো কপি করে আপনার Tailwind প্রজেক্টে সেটি পুনরায় তৈরি করুন। একটি এলিমেন্ট থেকে লেআউট নিন, অন্যটি থেকে টাইপোগ্রাফি এবং আপনার ব্র্যান্ড প্যালেট থেকে কালার — সব মিক্স অ্যান্ড ম্যাচ করুন।
CSS সোর্স ভ্যালু দেখতে ক্লাস ট্যাগের ওপর হোভার করুন। এই ইন্টারেক্টিভ ম্যাপিংটি শেখার দ্রুততম উপায় যে p-4 মানে ১৬px, text-lg মানে ১৮px বা purple-600 মানে #7c3aed। যেকোনো ওয়েবসাইটকে আপনার জন্য Tailwind শেখার অনুশীলনীতে পরিণত করুন।
আপনার নিজস্ব Tailwind-মডেল সাইটের এলিমেন্টগুলো ইনস্পেক্ট করে যাচাই করুন যে ডিজাইন সিস্টেম থেকে সামঞ্জস্যপূর্ণ স্পেসিং, কালার এবং টাইপোগ্রাফি ব্যবহার করা হচ্ছে কিনা। অপ্রত্যাশিত কাস্টম ভ্যালুগুলো (যেমন p-[13px]) শনাক্ত করুন যা স্ট্যান্ডার্ড স্কেল ভ্যালু (p-3 বা p-3.5) হওয়া উচিত।
যখন আপনার পেস্ট করার জন্য দ্রুত ক্লাস স্ট্রিংয়ের প্রয়োজন হয় তখন Copy as Tailwind ব্যবহার করুন। যখন আপনি ব্রেকডাউন নিয়ে স্টাডি করতে চান, বেছে বেছে নির্দিষ্ট ক্লাস কপি করতে চান বা কেন প্রতিটি CSS প্রপার্টি-র জন্য নির্দিষ্ট Tailwind ক্লাস বেছে নেওয়া হয়েছে তা বুঝতে চান, তখন Tailwind Helper ব্যবহার করুন।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং Tailwind Helper আইকনে ক্লিক করুন। টুলটি সক্রিয় হয় এবং ডান পাশে একটি প্যানেল প্রদর্শিত হয়, যা ক্লাস ব্রেকডাউন দেখানোর জন্য প্রস্তুত।
পেজের যেকোনো এলিমেন্টে ক্লিক করুন। এটি একটি বেগুনী বর্ডার দিয়ে হাইলাইট হবে এবং প্যানেলটি ক্যাটাগরাইজড Tailwind ক্লাস দিয়ে পূর্ণ হবে। প্রতিটি ক্যাটাগরি (লেআউট, স্পেসিং, টাইপোগ্রাফি, কালার, বর্ডার, ইফেক্টস) ক্লাস ট্যাগ সহ একটি সেকশন হিসেবে দেখানো হবে।
এলিমেন্টের সম্পূর্ণ স্টাইল কম্পোজিশন বুঝতে ক্যাটাগরিগুলো ব্রাউজ করুন। প্রতিটি ক্লাস একটি ক্লিকযোগ্য ট্যাগ — সোর্স CSS ভ্যালু দেখতে হোভার করুন, সেই নির্দিষ্ট ক্লাস কপি করতে ক্লিক করুন।
নির্দিষ্ট ক্লাস কপি করতে আলাদা ট্যাগে ক্লিক করুন, অথবা সবকিছু একটি একক স্ট্রিং হিসেবে নিতে নিচের "Copy All Classes" বোতামটি ব্যবহার করুন। সরাসরি আপনার Tailwind কম্পোনেন্টে পেস্ট করুন।
নতুন ক্লাস দিয়ে প্যানেলটি সাথে সাথে আপডেট করতে পেজের অন্য কোনো এলিমেন্টে ক্লিক করুন। বারবার টুলটি বন্ধ এবং চালু করার প্রয়োজন নেই — ধারাবাহিকভাবে একাধিক এলিমেন্ট ইনস্পেক্ট করতে ক্লিক করতে থাকুন।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।