Tailwind CSS کیا ہے؟ ایپ بنانے والوں کے لیے آسان زبان میں گائیڈ

Tailwind CSS ویب سائٹس کو سٹائل کرنے کا ایک ٹول کٹ ہے۔ الگ فائل میں الگ سٹائل رولز لکھنے کے بجائے، آپ ہر عنصر کو مختصر، تیار کلاس کے نام دیتے ہیں: سفید پس منظر کے لیے bg-white، پیڈنگ کے لیے p-4، بڑے متن کے لیے text-lg، گول کونوں کے لیے rounded-xl، اور Tailwind وہ CSS بناتا ہے جو براؤزر کو درکار ہے۔ یہ مفت ہے، اوپن سورس ہے، اور جدید ویب ایپس کو سٹائل کرنے کے سب سے عام طریقوں میں سے ایک ہے۔

AI کے ساتھ ایپ بناتے وقت Tailwind کیوں اہم ہے

اگر آپ AI ایپ بلڈر سے ویب ایپ بنا رہے ہیں تو امکان ہے کہ آپ کی ایپ Tailwind سے سٹائل ہو رہی ہے۔ مثال کے طور پر Mythex نئے پروجیکٹس Vite + React + TypeScript + Tailwind پر شروع کرتا ہے، جب تک آپ کچھ اور نہ مانگیں (ٹیک کا انتخاب کیسے ہوتا ہے)۔

اس کے تین فائدے آپ کے لیے اہم ہیں:

• ڈیزائن میں تبدیلی آسان ہے۔ چونکہ سٹائلنگ ہر بٹن، کارڈ اور سرخی کے ساتھ ہی ہوتی ہے، AI “کارڈز کو کم بھرا ہوا بنائیں” جیسی درخواست پر ایک ہی جگہ چند کلاسز بدل سکتا ہے۔
• آپ اسے پڑھ سکتے ہیں۔ Tailwind کی کلاسز سادہ انگریزی کے قریب ہیں۔ text-center font-bold text-2xl کو سمجھنا مشکل نہیں، چاہے آپ نے کبھی کوڈ نہ لکھا ہو۔
• انداز یکساں رہتا ہے۔ Tailwind سائز، اسپیسنگ اور رنگوں کا ایک طے شدہ پیمانہ دیتا ہے۔ اس سے ایپ میں 14 تھوڑے مختلف خاکستری رنگ نہیں آتے۔

روزمرہ کی ایک مثال

گھر کی پینٹنگ کا تصور کریں۔

سادہ CSS ایسا ہے جیسے ہر دیوار کے لیے اپنا رنگ خود ملانا۔ آزادی مکمل ہے، لیکن کچھ عرصے بعد ڈرائنگ روم “گرم سفید” ہے، راہداری “تھوڑا سا زیادہ گرم سفید” ہے، اور کسی کو یاد نہیں کہ ایسا کیوں ہے۔

Tailwind ایسا ہے جیسے پینٹ کی دکان کا رنگوں کا چارٹ اور لیبل والے اسٹیکرز۔ ہر دیوار پر ایک اسٹیکر ہوتا ہے، “سفید، میٹ، 2 کوٹ”، اور چارٹ صرف منتخب شیڈز پیش کرتا ہے۔ آزادی تھوڑی کم ہوتی ہے، لیکن کام پر موجود ہر شخص اسٹیکر پڑھ کر جان لیتا ہے کہ ہر دیوار کیسی ہونی چاہیے۔

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 کے ساتھ آپ وہ رول نہیں لکھتے، بلکہ عنصر پر ہی utility classes لگا دیتے ہیں:

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

ہر کلاس ایک چھوٹا کام کرتی ہے۔ ایپ بنتے وقت Tailwind آپ کی فائلیں اسکین کرتا ہے، وہ کلاسز ڈھونڈتا ہے جو واقعی استعمال ہوئیں، اور صرف انہی کے لیے CSS بناتا ہے۔ اس سے آخری stylesheet چھوٹی رہتی ہے۔

Tailwind کا موجودہ بڑا ورژن 4 بہت کم configuration کے ساتھ سیٹ ہوتا ہے: آپ اسے انسٹال کرتے ہیں، اس کا plugin اپنے build tool میں شامل کرتے ہیں، اور اپنی CSS فائل کے اوپر @import "tailwindcss"; لکھتے ہیں۔ برانڈ کے رنگ اور فونٹس جیسی تبدیلیاں CSS میں design tokens کے طور پر بیان ہوتی ہیں، نہ کہ پرانے ورژنز کی طرح ایک بڑی JavaScript config فائل میں۔ اگر آپ کوئی پرانا ٹیوٹوریل پڑھیں جو tailwind.config.js کا ذکر کرے، تو اسی وجہ سے ہے۔

عملی مثال: ایک پرائسنگ کارڈ

فرض کریں آپ نے AI بلڈر سے پرائسنگ صفحہ مانگا ہے اور چاہتے ہیں کہ “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 کارڈ کو نیلے بارڈر اور ہلکے سائے کے ساتھ نمایاں کریں”، تو AI شاید border-gray-200 کو border-2 border-blue-600 سے بدل دے اور shadow-lg شامل کر دے۔ بس اتنی ہی تبدیلی ہے۔

ریسپانسو ڈیزائن اور ڈارک موڈ

Tailwind میں اسکرین سائز اور حالات کے لیے مختصر prefixes ہیں:

• md:grid-cols-3 — درمیانی اور بڑی اسکرینز پر تین کالمز؛ فون پر ڈیفالٹ ایک کالم ہی رہتا ہے۔ Tailwind mobile-first ہے: بغیر prefix والی کلاسز ہر جگہ لاگو ہوتی ہیں، اور prefixes بڑی اسکرینز کے لیے تبدیلیاں جوڑتے ہیں۔
• hover:bg-gray-700 — ماؤس عنصر پر ہو تو گہرا بٹن۔
• dark:bg-gray-900 — ڈارک موڈ آن ہونے پر مختلف پس منظر۔

اسی لیے Tailwind پروجیکٹ میں موبائل کے لیے ریسپانسو لے آؤٹ یا ڈارک موڈ مانگنا عموماً جلدی ہو جاتا ہے۔

اہم اصطلاحات

عام غلط فہمیاں

• “Tailwind ایک ڈیزائن ہے۔” ایسا نہیں ہے۔ Tailwind آپ کو تعمیری بلاکس دیتا ہے، کوئی خاص انداز نہیں۔ دو Tailwind سائٹس بالکل مختلف دکھ سکتی ہیں۔ عام “AI ایپ کا انداز” ڈیفالٹس سے آتا ہے، خود Tailwind سے نہیں؛ اپنے بلڈر کو واضح سمت دیں۔ دیکھیں AI سے اچھی دکھنے والی ایپ کیسے ڈیزائن کریں۔
• “یہ inline styles جیسا ہی ہے۔” پوری طرح نہیں۔ کلاسز ایک مشترکہ پیمانے سے آتی ہیں، hover، ڈارک موڈ اور breakpoints کو سپورٹ کرتی ہیں، اور build کے وقت عام CSS میں بدل جاتی ہیں۔
• “Tailwind صفحات کو بھاری بناتا ہے۔” build میں صرف وہی کلاسز شامل ہوتی ہیں جو آپ استعمال کرتے ہیں، اس لیے وزیٹرز تک جانے والی CSS عموماً چھوٹی ہوتی ہے۔
• “کلاسز کی لمبی فہرستیں بے ترتیب کوڈ ہیں۔” شروع میں یہ بھری ہوئی لگتی ہیں، لیکن کسی عنصر کا پورا انداز ایک ہی جگہ ہوتا ہے۔ دہرائے جانے والے ڈیزائن عموماً کمپوننٹس میں ڈال دیے جاتے ہیں، جیسے ایک Button کمپوننٹ۔
• “اگر Tailwind استعمال کروں تو حسبِ ضرورت CSS نہیں لکھ سکتا۔” جب بھی ضرورت ہو، آپ عام CSS لکھ سکتے ہیں۔

اپنے AI بلڈر سے کیا مانگیں

• “ہمارے برانڈ کے رنگ اور فونٹس ایک بار theme tokens کے طور پر بیان کریں، اور ہر جگہ انہی کو استعمال کریں، سخت کوڈ کیے ہوئے رنگوں کے بجائے۔”
• “ہر کارڈ، بٹن اور input ایک ہی کونے کا گولائی اور ایک ہی اسپیسنگ استعمال کرے۔”
• “فون کی چوڑائی پر لے آؤٹ چیک کریں اور جو کچھ باہر نکلتا ہو یا ٹیپ کرنے کے لیے بہت چھوٹا ہو، اسے درست کریں۔”
• “Tailwind کے dark: variant سے ڈارک موڈ شامل کریں اور یقینی بنائیں کہ متن کا کنٹراسٹ پڑھنے کے قابل رہے۔”
• “دہرائے جانے والے بٹن کے انداز ایک قابلِ استعمال Button کمپوننٹ میں ڈالیں۔”
• “اس سیکشن کی Tailwind کلاسز سادہ اردو یا انگریزی میں سمجھائیں۔”

Mythex میں Tailwind

نئے Mythex پروجیکٹس ڈیفالٹ کے طور پر React اور TypeScript کے ساتھ Tailwind استعمال کرتے ہیں، تاکہ آپ بصری تبدیلیاں سادہ الفاظ میں مانگ سکیں اور انہیں براہِ راست Preview میں دیکھ سکیں۔ اگر آپ کوڈ دیکھنا چاہیں تو کوڈ ایڈیٹر ہر کلاس دکھاتا ہے (Free پلان پر صرف پڑھنے کے لیے، Pro پر قابلِ تدوین)۔ اگر آپ سادہ CSS یا کوئی اور سیٹ اپ چاہتے ہیں تو پہلے prompt میں بتا دیں — docs میں درج ہے کہ اسٹیک کیسے چنا جاتا ہے۔

سوالات