Copy as Tailwind ভিজ্যুয়াল ডিজাইন এবং Tailwind CSS কোডের মধ্যে ব্যবধান কমায়। একটি ওয়েবপৃষ্ঠার যেকোনো এলিমেন্টে ক্লিক করুন এবং এর কম্পিউটেড CSS স্টাইল থেকে জেনারেট করা সমতুল্য Tailwind ইউটিলিটি ক্লাসগুলো তাৎক্ষণিকভাবে পান — যা আপনার JSX, Vue টেম্পলেট বা HTML ফাইলে পেস্ট করার জন্য প্রস্তুত।
Tailwind CSS দিয়ে কাজ করার অর্থ হল কাস্টম CSS লেখার পরিবর্তে ইউটিলিটি ক্লাস দিয়ে চিন্তা করা। কিন্তু আপনি যখন বিদ্যমান কোনো ডিজাইন রেফারেন্স হিসেবে নিচ্ছেন — তা কোনো প্রতিযোগীর ল্যান্ডিং পেজ হোক, ভ্যানিলা CSS-এ তৈরি ডিজাইন সিস্টেম হোক বা কোনো ক্লায়েন্টের বর্তমান ওয়েবসাইট — ভিজ্যুয়াল স্টাইলগুলোকে ম্যানুয়ালি Tailwind ক্লাসে রূপান্তর করা ক্লান্তিকর এবং ভুলের সম্ভাবনা থাকে। Copy as Tailwind এটি সম্পূর্ণ স্বয়ংক্রিয়ভাবে করে। এটি যেকোনো এলিমেন্টের জন্য ব্রাউজারের কম্পিউটেড স্টাইলগুলো পড়ে এবং ডিফল্ট স্কেল ব্যবহার করে প্রতিটি প্রপার্টিকে নিকটতম Tailwind ইউটিলিটি ক্লাসের সাথে ম্যাপ করে। কালারগুলো নিকটতম Tailwind প্যালেট কালারের সাথে মেলানো হয়, স্পেসিং ভ্যালুগুলো নিকটতম rem-ভিত্তিক ইউটিলিটির সাথে যুক্ত হয় এবং টাইপোগ্রাফি text-* ও font-* ক্লাসের সাথে ম্যাপ হয়। আউটপুটটি হল একটি পরিষ্কার, এক লাইনের ক্লাস স্ট্রিং যা আপনি সরাসরি আপনার কম্পোনেন্টে পেস্ট করতে পারেন।
bg-purple-600 text-white
px-7 py-3 rounded-lg
font-semibold text-base
border-2 border-purple-400
যেকোনো এলিমেন্টে ক্লিক করুন এবং এর সম্পূর্ণ কম্পিউটেড CSS রিয়েল-টাইমে বিশ্লেষণ করা হয়। প্রতিটি প্রযোজ্য প্রপার্টি সমতুল্য Tailwind ইউটিলিটি ক্লাসে ম্যাপ করা হয় — bg-purple-600 থেকে rounded-lg বা font-semibold পর্যন্ত। রূপান্তরটি কোনো লোডিং বা প্রসেসিং ডিলে ছাড়াই তাৎক্ষণিকভাবে ঘটে।
টুলটি কেবল স্ট্রিং রিপ্লেসমেন্ট করে না — এটি Tailwind-এর ডিজাইন সিস্টেম বোঝে। ১২px প্যাডিং p-3 (কাস্টম ভ্যালু নয়) হিসেবে ম্যাপ হয়, কালারগুলো Tailwind-এর প্যালেটের নিকটতম শেডের সাথে মেলানো হয় (যেমন, #7c3aed হয়ে যায় purple-600), এবং ফন্ট সাইজগুলো text-sm, text-base, text-lg ইত্যাদির সাথে ম্যাপ হয়।
জেনারেট করা ক্লাস স্ট্রিংটি একটি পরিষ্কার আউটপুট প্যানেলে প্রদর্শিত হয়। একবার কপি বাটনে ক্লিক করুন এবং সম্পূর্ণ স্ট্রিংটি আপনার ক্লিপবোর্ডে চলে আসবে — React-এ className="...", HTML-এ class="...", বা Vue-তে :class="..."-এ পেস্ট করার জন্য প্রস্তুত।
আরও দ্রুত কাজের জন্য, ব্রাউজার কনটেক্সট মেনু থেকে সরাসরি "Copy as Tailwind" অ্যাক্সেস করতে পেজের যেকোনো এলিমেন্টে রাইট-ক্লিক করুন। DevSuite ডক ওপেন করার প্রয়োজন নেই — শুধু রাইট-ক্লিক করুন, ক্লিক করুন এবং ক্লাসগুলো আপনার ক্লিপবোর্ডে চলে আসবে।
সাধারণ ম্যাপিংয়ের বাইরেও কাজ করে। বক্স শ্যাডো (shadow-md, shadow-lg), গ্রেডিয়েন্ট, বর্ডার স্টাইল, ফ্লেক্স/গ্রিড লেআউট ক্লাস, অপাসিটি ভ্যালু এবং এমনকি max-width ও aspect ratio-র মতো রেসপন্সিভ প্রপার্টিও হ্যান্ডল করে।
শুধুমাত্র সেই ক্লাসগুলো অন্তর্ভুক্ত করে যা ব্রাউজার ডিফল্ট থেকে আলাদা — কোনো অপ্রয়োজনীয় ইউটিলিটি নয়। আউটপুটটি সংক্ষিপ্ত এবং প্রোডাকশন-রেডি, ইনহেরিটেড বা ডিফল্ট ভ্যালুর জন্য অতিরিক্ত ক্লাসে ভরা নয়।
Tailwind হিসেবে কপি করুন covers the following, organized by category:
display (flex, grid, block)position (relative, absolute)flex-directionjustify-contentalign-itemsgapoverflowpadding (p-*)margin (m-*)width (w-*)height (h-*)max-widthmin-heightfont-size (text-*)font-weight (font-*)line-height (leading-*)letter-spacing (tracking-*)text-aligntext-transformcolor (text-*)background-color (bg-*)border-color (border-*)opacityborder-width (border-*)border-radius (rounded-*)border-stylebox-shadow (shadow-*)transform (scale-*, rotate-*)transitioncursorভ্যানিলা CSS বা Bootstrap থেকে কোনো ওয়েবসাইটকে Tailwind-এ রূপান্তর করছেন? বিদ্যমান সাইটের প্রতিটি প্রধান কম্পোনেন্টে ক্লিক করুন, Tailwind ক্লাসগুলো কপি করুন এবং সেগুলোকে আপনার নতুন Tailwind কম্পোনেন্টের ভিত্তি হিসেবে ব্যবহার করুন। এটি কয়েক ঘণ্টার ম্যানুয়ালি প্রপার্টি-টু-ক্লাস ট্রান্সলেশনের কাজ বাঁচিয়ে দেয়।
অন্য কোনো ওয়েবসাইটে চমৎকারভাবে ডিজাইন করা কোনো কার্ড, হিরো সেকশন বা ন্যাভিগেশন পেয়েছেন? সেটিতে ক্লিক করুন, Tailwind ক্লাসগুলো পান এবং সেগুলো আপনার নিজস্ব সংস্করণ তৈরির জন্য রেফারেন্স হিসেবে ব্যবহার করুন। ডজন ডজন CSS প্রপার্টি ম্যানুয়ালি ইনস্পেক্ট করার দরকার নেই।
Figma বা PSD মকআপ থেকে নতুন Tailwind কম্পোনেন্ট তৈরির সময় প্রথমে DevTools ব্যবহার করে ব্রাউজারে ডিজাইনটি ইমপ্লিমেন্ট করুন, তারপর হাতে লেখার পরিবর্তে সঠিক ইউটিলিটি ক্লাসগুলো পেতে Copy as Tailwind দিয়ে এলিমেন্টে ক্লিক করুন।
আপনার হাতে লেখা CSS ভ্যালুগুলো প্রকৃতপক্ষে বৈধ Tailwind স্কেল ভ্যালুর সাথে ম্যাপ হচ্ছে কিনা তা নিশ্চিত করুন। আপনি যদি 'padding: 14px' লেখেন, তাহলে টুলটি আপনাকে দেখাবে যে এটি p-3 (12px) না কি p-3.5 (14px)-এ রাউন্ড হচ্ছে — যা প্রোডাকশনে যাওয়ার আগে ভুলগুলো ধরতে সাহায্য করে।
Tailwind-এ নতুন? ট্র্যাডিশনাল CSS প্রপার্টিগুলো কীভাবে ইউটিলিটি ক্লাসে রূপান্তর হয় তা দেখতে যেকোনো ওয়েবপৃষ্ঠার এলিমেন্টগুলোতে ক্লিক করুন। বাস্তব উদাহরণ দেখার মাধ্যমে Tailwind ক্লাস নেমিং সিস্টেম শেখার এটি একটি ইন্টারঅ্যাক্টিভ উপায়।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং Copy as Tailwind আইকনে ক্লিক করুন। টুলটি সক্রিয় হয় এবং আপনার কার্সার একটি ক্রসহেয়ার সিলেক্টরে পরিবর্তিত হয়, যা নির্দেশ করে যে আপনি এখন এলিমেন্টগুলোতে ক্লিক করতে পারেন।
পেজের যেকোনো এলিমেন্টে ক্লিক করুন — একটি বোতাম, কার্ড, হেডিং বা ন্যাভিগেশন বার। এলিমেন্টটি হাইলাইট হয় এবং এর কম্পিউটেড CSS বিশ্লেষণ করা হয়। জেনারেট করা Tailwind ক্লাস স্ট্রিং সহ একটি ফ্লোটিং প্যানেল প্রদর্শিত হয়।
প্যানেলটি সম্পূর্ণ Tailwind ক্লাস স্ট্রিংটিকে লজিক্যাল গ্রুপে বিভক্ত করে দেখায়। আপনি ঠিক দেখতে পারবেন কোন CSS প্রপার্টি কোন Tailwind ক্লাসে ম্যাপ করা হয়েছে। যেকোনো ক্লাসের ওপর হোভার করে সেটি যে CSS ভ্যালু রিপ্রেজেন্ট করে তা দেখুন।
সম্পূর্ণ ক্লাস স্ট্রিংটি নিতে "Copy" বাটনে ক্লিক করুন। এটি সরাসরি আপনার কম্পোনেন্টের className, class অ্যাট্রিবিউট বা টেমপ্লেটে পেস্ট করুন। ক্লাসগুলো স্ট্যান্ডার্ড Tailwind সেটআপে তাৎক্ষণিকভাবে কাজ করে।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।