Tailwind CSS কী? অ্যাপ নির্মাতাদের জন্য সহজ গাইড

Tailwind CSS ওয়েবসাইট স্টাইল করার একটি টুলকিট। আলাদা স্টাইল ফাইলে আলাদা নিয়ম লেখার বদলে আপনি প্রতিটি এলিমেন্টে ছোট, তৈরি ক্লাস নাম দেন: সাদা ব্যাকগ্রাউন্ডের জন্য bg-white, প্যাডিংয়ের জন্য p-4, বড় লেখার জন্য text-lg, গোলাকার কোণের জন্য rounded-xl, এবং Tailwind প্রয়োজনীয় CSS তৈরি করে। এটি বিনামূল্যে, ওপেন সোর্স, এবং আধুনিক ওয়েব অ্যাপ স্টাইল করার অন্যতম সাধারণ উপায়।

এআই দিয়ে বানানোর সময় Tailwind কেন গুরুত্বপূর্ণ

আপনি যদি কোনো এআই অ্যাপ বিল্ডার দিয়ে ওয়েব অ্যাপ বানান, তবে আপনার অ্যাপ সম্ভবত Tailwind দিয়ে স্টাইল করা। উদাহরণস্বরূপ, Mythex নতুন প্রজেক্ট Vite + React + TypeScript + Tailwind-এ শুরু করে, যদি আপনি অন্য কিছু না চান (প্রযুক্তি কীভাবে বাছা হয়)।

এতে তিনভাবে আপনার সুবিধা হয়:

• ডিজাইন বদল সহজ। স্টাইলিং প্রতিটি বোতাম, কার্ড ও শিরোনামের পাশেই থাকে, তাই এআই "কার্ডগুলো কম ঠাসা করো" বললে একটি জায়গায় কয়েকটি ক্লাস নাম বদলে দিতে পারে।
• আপনি এটি পড়তে পারেন। Tailwind ক্লাস সাধারণ ইংরেজির কাছাকাছি। text-center font-bold text-2xl বুঝতে কঠিন নয়, এমনকি কখনো কোড না লিখলেও।
• চেহারা ধারাবাহিক থাকে। Tailwind আকার, স্পেসিং ও রঙের একটি নির্দিষ্ট স্কেল দেয়। এতে অ্যাপে ১৪টি সামান্য আলাদা ধূসর রঙ ঢুকে পড়ে না।

একটি দৈনন্দিন উদাহরণ

বাড়ি তৈরির কথা ভাবুন।

সাধারণ CSS হলো প্রতিটি দেয়ালের জন্য নিজে রং মেশানো। পূর্ণ স্বাধীনতা থাকে, কিন্তু কিছুদিন পর বসার ঘর "উষ্ণ সাদা", করিডর "একটু বেশি উষ্ণ সাদা", আর কেউ মনে রাখে না কেন।

Tailwind হলো রং-তালিকা আর লেবেল-স্টিকার দেওয়া একটি পেইন্ট দোকান। প্রতিটি দেয়ালে একটি স্টিকার থাকে: "সাদা, ম্যাট, ২ কোট"। তালিকায় শুধু বাছাই করা কিছু শেড থাকে। কিছু স্বাধীনতা কমে, কিন্তু কাজে যারা থাকে তারা স্টিকার পড়েই জানে প্রতিটি দেয়াল কেমন হওয়া উচিত।

Tailwind কীভাবে কাজ করে

ওয়েব পেজ তৈরি হয় HTML (কনটেন্ট ও কাঠামো) এবং CSS (চেহারা) দিয়ে। সাধারণত CSS একটি আলাদা ফাইলে এমন নিয়মের আকারে থাকে:

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Tailwind-এ আপনি সেই নিয়ম লেখা এড়িয়ে সরাসরি এলিমেন্টে ইউটিলিটি ক্লাস বসান:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Your booking is confirmed
</div>

প্রতিটি ক্লাস একটি ছোট কাজ করে। অ্যাপ বিল্ড হওয়ার সময় Tailwind আপনার ফাইলগুলো স্ক্যান করে, যেসব ক্লাস আসলে ব্যবহার হয়েছে তা খুঁজে বের করে, এবং শুধু সেগুলোর CSS তৈরি করে। এতে চূড়ান্ত স্টাইলশিট ছোট থাকে।

Tailwind-এর বর্তমান মেজর ভার্সন 4 খুব সামান্য কনফিগারেশনে সেটআপ হয়: ইনস্টল করুন, বিল্ড টুলে এর প্লাগইন যোগ করুন, এবং CSS ফাইলের শুরুতে @import "tailwindcss"; লিখুন। ব্র্যান্ডের রঙ ও ফন্টের মতো কাস্টমাইজেশন বড় একটি JavaScript কনফিগ ফাইলের বদলে CSS-এ ডিজাইন টোকেন হিসেবে সংজ্ঞায়িত হয়, যেমনটা পুরোনো সংস্করণে লাগত। পুরোনো টিউটোরিয়ালে tailwind.config.js-এর উল্লেখ থাকলে সেটাই কারণ।

একটি বাস্তব উদাহরণ: একটি প্রাইসিং কার্ড

ধরুন আপনি এআই বিল্ডারকে একটি প্রাইসিং পেজ বানাতে বলেছেন এবং চান "Pro" কার্ডটি আলাদাভাবে ফুটে উঠুক। কার্ডের কোড এমন হতে পারে (একটি React কম্পোনেন্টে class-কে className লেখা হয়):

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">$25</p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Start trial
  </button>
</div>

বাম থেকে ডানে পড়লে:

আপনি যদি বলেন "Pro কার্ডকে নীল বর্ডার ও হালকা ছায়া দিয়ে আলাদা করো", তবে এআই হয়তো border-gray-200-কে border-2 border-blue-600 করবে এবং shadow-lg যোগ করবে। পুরো পরিবর্তনটুকু এই।

রেসপন্সিভ ডিজাইন ও ডার্ক মোড

Tailwind স্ক্রিনের আকার ও অবস্থার জন্য ছোট প্রিফিক্স দেয়:

• md:grid-cols-3 — মাঝারি ও তার বড় স্ক্রিনে তিনটি কলাম; ফোনে ডিফল্ট একক কলাম থাকে। Tailwind mobile-first: প্রিফিক্স ছাড়া ক্লাস সব জায়গায় প্রযোজ্য, আর প্রিফিক্স বড় স্ক্রিনের জন্য পরিবর্তন যোগ করে।
• hover:bg-gray-700 — মাউস বোতামের উপর থাকলে গাঢ় রঙ।
• dark:bg-gray-900 — ডার্ক মোড চালু থাকলে ভিন্ন ব্যাকগ্রাউন্ড।

এজন্য একটি Tailwind প্রজেক্টে মোবাইল-রেসপন্সিভ লেআউট বা ডার্ক মোড চাওয়া সাধারণত দ্রুত হয়।

মূল পরিভাষা

সাধারণ ভুল ধারণা

• "Tailwind একটি ডিজাইন।" নয়। Tailwind আপনাকে বিল্ডিং ব্লক দেয়, চেহারা দেয় না। দুটি Tailwind সাইট পুরোপুরি আলাদা দেখতে হতে পারে। সাধারণ "এআই অ্যাপের চেহারা" আসে ডিফল্ট থেকে, Tailwind থেকে নয়। আপনার বিল্ডারকে সঠিক দিকনির্দেশনা দিন। দেখুন এআই দিয়ে ভালো দেখতে অ্যাপ ডিজাইন কীভাবে করবেন।
• "এটি ইনলাইন স্টাইলের মতো।" পুরোপুরি নয়। ক্লাসগুলো একটি ভাগ করা স্কেল থেকে আসে, হভার, ডার্ক মোড ও ব্রেকপয়েন্ট সমর্থন করে, এবং বিল্ড সময়ে সাধারণ CSS-এ রূপান্তরিত হয়।
• "Tailwind পেজকে ভারী করে।" বিল্ড শুধু আপনার ব্যবহৃত ক্লাসগুলো অন্তর্ভুক্ত করে, তাই দর্শকদের পাঠানো CSS সাধারণত ছোট থাকে।
• "দীর্ঘ ক্লাস তালিকা মানেই অগোছালো কোড।" প্রথমে ব্যস্ত লাগতে পারে, কিন্তু একটি এলিমেন্টের সব চেহারা একই জায়গায় থাকে। বারবার আসা প্যাটার্ন সাধারণত কম্পোনেন্টে রাখা হয়, যেমন একটি Button।
• "Tailwind ব্যবহার করলে কাস্টম CSS লেখা যায় না।" যখনই দরকার, আপনি সাধারণ CSS লিখতে পারেন।

আপনার এআই বিল্ডারকে কী চাইবেন

• "ব্র্যান্ডের রঙ ও ফন্ট একবার থিম টোকেন হিসেবে সংজ্ঞায়িত করো, এবং সর্বত্র ব্যবহার করো, সরাসরি লেখা রঙের বদলে।"
• "প্রতিটি কার্ড, বোতাম ও ইনপুটে একই কোণের গোলাকার ভাব ও স্পেসিং ব্যবহার করো।"
• "ফোনের প্রস্থে লেআউট যাচাই করো এবং যা উপচে পড়ে বা ট্যাপ করার জন্য খুব ছোট, তা ঠিক করো।"
• "Tailwind-এর dark: ভ্যারিয়েন্ট ব্যবহার করে ডার্ক মোড যোগ করো এবং টেক্সটের কনট্রাস্ট পাঠযোগ্য রাখো।"
• "বারবার আসা বোতামের স্টাইল একটি পুনঃব্যবহারযোগ্য Button কম্পোনেন্টে রাখো।"
• "এই অংশের Tailwind ক্লাসগুলো সাধারণ ভাষায় ব্যাখ্যা করো।"

Mythex-এ Tailwind

নতুন Mythex প্রজেক্ট ডিফল্টভাবে Tailwind ব্যবহার করে, সঙ্গে React ও TypeScript, তাই চেহারার পরিবর্তন সাধারণ ভাষায় চাইতে পারেন এবং লাইভ Preview-তে দেখতে পারেন। কোড দেখতে চাইলে কোড এডিটর প্রতিটি ক্লাস দেখায় (Free-এ শুধু পড়া যায়, Pro-তে সম্পাদনা করা যায়)। যদি সাধারণ CSS বা অন্য সেটআপ পছন্দ করেন, প্রথম প্রম্পটেই বলুন; ডক্স কীভাবে স্ট্যাক বাছা হয় তা ব্যাখ্যা করে।

প্রশ্নোত্তর