Tailwind CSS

Tailwind CSS ایک utility-first CSS فریم ورک ہے جو براہِ راست HTML میں لکھی گئی چھوٹی، ایک مقصد والی کلاسز سے صفحے کو اسٹائل دیتا ہے۔ p-4، text-center اور bg-blue-500 جیسی ہر کلاس ایک اسٹائل لاگو کرتی ہے۔ ڈویلپرز ان کلاسز کو ملا کر زیادہ کسٹم CSS لکھے بغیر کوئی بھی ڈیزائن بنا لیتے ہیں۔

Utility-first CSS کا مطلب ہر کمپوننٹ کے لیے الگ کلاس لکھنے کے بجائے بہت سی چھوٹی کلاسز سے ڈیزائن بنانا ہے جن میں سے ہر ایک ایک کام کرتی ہے۔ بٹن اپنی شکل padding، رنگ، کونوں کی گولائی اور فونٹ کی موٹائی کی کلاسز سے لیتا ہے۔ یہ طریقہ اسٹائلز کو مارک اپ کے قریب رکھتا ہے اور مسلسل بڑھتی بڑی اسٹائل شیٹس سے بچاتا ہے۔

ڈویلپرز Tailwind CSS اس لیے چنتے ہیں کہ یہ اسٹائلنگ کی رفتار بڑھاتا ہے اور حتمی CSS فائل کو چھوٹا رکھتا ہے۔ ہر تبدیلی کے لیے کلاسز کے نام ایجاد کرنے یا HTML اور CSS فائلوں کے درمیان آنے جانے کی ضرورت نہیں رہتی۔ Tailwind CSS فاصلوں، رنگوں اور فونٹ سائز کا یکساں پیمانہ بھی دیتا ہے، جو ڈیزائن کو منظم رکھتا ہے۔

Tailwind CSS اپنا ڈیزائن بنانے کے لیے بنیادی یوٹیلیٹی کلاسز دیتا ہے، جبکہ Bootstrap نیوی گیشن بار، کارڈز اور موڈلز جیسے تیار کمپوننٹس دیتا ہے۔ کم ڈیزائن محنت کے ساتھ معیاری شکل کے لیے Bootstrap زیادہ تیز ہے۔ جب منصوبے کو طے شدہ تھیم سے لڑے بغیر اپنا منفرد ڈیزائن چاہیے تو Tailwind CSS بہتر ہے۔

Tailwind CSS کو npm سے انسٹال کر کے منصوبے کے بلڈ ٹول، جیسے Vite، PostCSS یا Tailwind CLI، سے جوڑا جاتا ہے۔ Tailwind CSS ورژن 4 میں پیکج شامل کریں، پھر اپنی مرکزی CSS فائل کے اوپر @import "tailwindcss" سے اسے import کریں۔ سرکاری انسٹالیشن گائیڈ میں Laravel، Next.js اور Vite سمیت ہر عام فریم ورک کے مختصر مراحل موجود ہیں۔

Tailwind CSS ان نئے سیکھنے والوں کے لیے ٹھیک ہے جو margin، padding، flexbox اور grid جیسی بنیادی CSS خصوصیات پہلے سے سمجھتے ہیں۔ ہر Tailwind کلاس ایک اصل CSS خصوصیت سے جڑی ہوتی ہے، اس لیے پہلے CSS سیکھنا کلاسز کو پڑھنا آسان بنا دیتا ہے۔ CSS کی بنیادی باتیں چھوڑ دینے والے اکثر Tailwind CSS میں لے آؤٹ درست کرنے میں مشکل محسوس کرتے ہیں۔

CSS جاننے والے زیادہ تر ڈویلپرز چند دنوں میں Tailwind CSS کے ساتھ پیداواری بن جاتے ہیں۔ کلاسز کے نام واضح انداز پر چلتے ہیں، اس لیے کلاسز کا ایک گروپ سیکھنا باقی کا اندازہ لگانے میں مدد دیتا ہے۔ ریسپانسیو variants، اپنی تھیمز اور کمپوننٹ کے انداز میں مہارت کے لیے چند ہفتوں کا اصل استعمال درکار ہے۔

Tailwind CSS میں ریسپانسیو ڈیزائن کسی بھی یوٹیلیٹی کلاس سے پہلے sm:، md: اور lg: جیسے بریک پوائنٹ prefixes لگا کر کام کرتا ہے۔ Tailwind CSS، mobile-first ہے، اس لیے prefix کے بغیر کلاس تمام اسکرینوں پر لاگو ہوتی ہے اور prefix والی کلاس اس بریک پوائنٹ سے اوپر لاگو ہوتی ہے۔ مثال کے طور پر text-sm md:text-lg فونز پر چھوٹا اور چوڑی اسکرینوں پر بڑا متن دیتا ہے۔

Tailwind CSS کے طے شدہ بریک پوائنٹس sm پر 640 پکسل، md پر 768 پکسل، lg پر 1024 پکسل، xl پر 1280 پکسل اور 2xl پر 1536 پکسل ہیں۔ ہر بریک پوائنٹ ایک کم از کم چوڑائی ہے، جو Tailwind کے mobile-first طریقے سے میل کھاتی ہے۔ منصوبہ اپنی تھیم سیٹنگز میں یہ قدریں بدل سکتا ہے یا نئے بریک پوائنٹس شامل کر سکتا ہے۔

Tailwind CSS میں ڈارک موڈ شامل کرنے کے لیے کسی بھی کلاس سے پہلے dark: prefix لگائیں، جیسے dark:bg-gray-900۔ طے شدہ طور پر Tailwind CSS وزیٹر کے آپریٹنگ سسٹم کی سیٹنگ کی پیروی کرتا ہے۔ صارفین کو بٹن سے ڈارک موڈ بدلنے دینے کے لیے dark variant کو صفحے پر کسی کلاس یا data ایٹریبیوٹ پر منحصر بنائیں۔

Tailwind CSS ورژن 4 میں رنگ اور فونٹس مرکزی CSS فائل کے @theme بلاک کے اندر CSS ویری ایبلز سے حسبِ ضرورت بنائے جاتے ہیں۔ --color-brand جیسا ویری ایبل bg-brand اور text-brand جیسی کلاسز خود بخود بنا دیتا ہے۔ پرانے ورژنز اسی کام کے لیے tailwind.config.js فائل استعمال کرتے تھے، اور یہ طریقہ ورژن 4 میں ایک مطابقت والے آپشن کے ذریعے اب بھی کام کرتا ہے۔

Tailwind CSS، HTML کو بھرا ہوا دکھا سکتا ہے، کیونکہ ایک عنصر پر بہت سی کلاسز ہو سکتی ہیں۔ زیادہ تر ٹیمیں بار بار کے انداز کو اپنے فریم ورک میں کمپوننٹس بنا کر یہ مسئلہ حل کرتی ہیں، جیسے Blade، React یا Vue کمپوننٹ۔ اس کے بدلے اسٹائلز مارک اپ کے ساتھ نظر آتے رہتے ہیں، جس سے تبدیلیاں تیز اور محفوظ ہوتی ہیں۔

Tailwind CSS منصوبے کی فائلیں اسکین کر کے صرف وہی کلاسز بناتا ہے جو واقعی استعمال ہوتی ہیں، اسی سے CSS فائل چھوٹی رہتی ہے۔ غیر استعمال شدہ یوٹیلیٹیز کبھی حتمی اسٹائل شیٹ تک نہیں پہنچتیں۔ Tailwind CSS سے بنی عام پروڈکشن CSS فائل بڑی سائٹس کے لیے بھی چھوٹی ہوتی ہے۔

Tailwind CSS میں @apply directive آپ کو اپنے CSS قواعد کے اندر Tailwind یوٹیلیٹی کلاسز استعمال کرنے دیتا ہے۔ یہ اس مواد کو اسٹائل دینے کے لیے مفید ہے جس پر آپ کا کنٹرول نہیں، جیسے ٹیکسٹ ایڈیٹر سے بنا HTML۔ Tailwind ٹیم اسے کم استعمال کرنے کا مشورہ دیتی ہے، کیونکہ اسٹائلز دوبارہ استعمال کرنے کے لیے کمپوننٹس عموماً زیادہ صاف طریقہ ہیں۔

جی ہاں، Tailwind CSS، Laravel کے ساتھ اچھا کام کرتا ہے، اور نئے Laravel منصوبے اسے Vite کے ساتھ استعمال کرنے کے لیے پہلے سے سیٹ ہوتے ہیں۔ آپ Blade ٹیمپلیٹس میں Tailwind کلاسز لکھتے ہیں اور Vite حتمی CSS بناتا ہے۔ Laravel کی starter kits بھی اپنی لاگ ان اور ڈیش بورڈ اسکرینوں کے لیے Tailwind CSS استعمال کرتی ہیں۔

جی ہاں، Tailwind CSS، React، Vue، Svelte اور زیادہ تر دوسرے JavaScript فریم ورکس کے ساتھ کام کرتا ہے۔ کلاسز کمپوننٹ کے مارک اپ میں React میں className اور Vue میں class کے ذریعے لکھی جاتی ہیں۔ چونکہ ہر کمپوننٹ اپنی کلاسز رکھتا ہے، اس لیے Tailwind CSS کمپوننٹ پر مبنی فریم ورکس کے ساتھ اچھی طرح فٹ ہوتا ہے۔

Tailwind CSS کا سرچ رینکنگ پر براہِ راست کوئی اثر نہیں، لیکن یہ CSS فائل کو چھوٹا اور صفحات کو تیز رکھ کر بالواسطہ SEO کی مدد کر سکتا ہے۔ صفحے کی رفتار Google کے page experience اشاروں کا حصہ ہے۔ اسٹائلنگ ٹول سے کہیں زیادہ مواد، صفحے کا ڈھانچہ اور HTML کی semantics اہم ہیں۔

Tailwind CSS میں arbitrary values آپ کو کوئی ایسی درست قدر استعمال کرنے دیتی ہیں جو تھیم میں نہ ہو، اسے مربع بریکٹس میں لکھ کر۔ مثال کے طور پر w-[37%] یا top-[117px] اسی قدر کی کلاس فوراً بنا دیتا ہے۔ Arbitrary values ایک بار کے معاملات کے لیے مفید ہیں، لیکن بار بار استعمال ہونے والی قدر تھیم میں ہونی چاہیے۔

Tailwind CSS میں hover اور focus حالتیں یوٹیلیٹی کلاس سے پہلے hover:، focus: یا active: جیسا حالت کا prefix لگا کر کام کرتی ہیں۔ مثال کے طور پر bg-blue-500 hover:bg-blue-600 ماؤس اوپر آنے پر بٹن کو گہرا کر دیتا ہے۔ Prefixes کو بریک پوائنٹس اور ڈارک موڈ کے ساتھ ملایا جا سکتا ہے، جیسے md:hover:underline۔

نہیں، خود Tailwind CSS میں صرف یوٹیلیٹی کلاسز شامل ہیں، موڈلز یا نیوی گیشن بار جیسے تیار کمپوننٹس نہیں۔ تیار کمپوننٹس الگ مجموعوں سے آتے ہیں، جیسے سرکاری Tailwind Plus یا daisyUI اور Flowbite جیسی کمیونٹی لائبریریاں۔ بہت سی ٹیمیں یوٹیلیٹیز کے اوپر اپنا چھوٹا کمپوننٹ سیٹ بناتی ہیں۔

جی ہاں، Tailwind CSS، rtl: اور ltr: variants اور logical یوٹیلیٹی کلاسز کے ذریعے دائیں سے بائیں لے آؤٹس کو سپورٹ کرتا ہے۔ ms-4 اور pe-2 جیسی logical کلاسز لائن کے آغاز یا اختتام پر margin اور padding لگاتی ہیں، اس لیے عربی اور اردو میں خود بخود پلٹ جاتی ہیں۔ اس سے ایک ہی مارک اپ انگریزی اور دائیں سے بائیں زبانوں دونوں کے صفحات کے لیے کام کرتا ہے۔

Tailwind CSS ورژن 4 نے کنفیگریشن کو @theme بلاک اور ایک @import لائن کے ساتھ CSS میں منتقل کر دیا۔ ورژن 4 تیز بلڈ انجن، مواد کی فائلوں کی خودکار شناخت اور cascade layers جیسی جدید CSS خصوصیات بھی لایا۔ ورژن 3 سے اپ گریڈ کرنے والے زیادہ تر منصوبے اپنا کوڈ اپ ڈیٹ کرنے کے لیے سرکاری upgrade tool استعمال کر سکتے ہیں۔

جب منصوبے کو تقریباً بغیر کسی اپنے ڈیزائن کے تیار کمپوننٹس کا پورا سیٹ چاہیے، یا ٹیم روایتی CSS لکھنا پسند کرتی ہو، تو Tailwind CSS مناسب نہیں ہو سکتا۔ چند اسٹائلز والے چھوٹے جامد صفحے کو کسی فریم ورک کی ضرورت ہی نہیں ہو سکتی۔ Tailwind CSS سب سے زیادہ فائدہ ان منصوبوں میں دیتا ہے جن کے اپنے ڈیزائن مسلسل بڑھتے رہتے ہیں۔

Tailwind CSS کلاسز کو منظم رکھنے کے لیے بار بار کے انداز کو کمپوننٹس میں بدلیں اور کلاسز کو یکساں ترتیب میں رکھیں۔ Tailwind CSS کا سرکاری Prettier پلگ ان محفوظ کرتے وقت کلاسز خود بخود ترتیب دیتا ہے۔ برانڈ کے رنگ اور فاصلے تھیم میں طے کرنا بھی کلاسز کو مختصر اور یکساں رکھتا ہے۔

جی ہاں، Tailwind CSS، MIT لائسنس کے تحت اوپن سورس ہے، اس لیے اسے ذاتی اور تجارتی منصوبوں میں استعمال کیا جا سکتا ہے۔ لائسنس کسی بھی پروڈکٹ میں Tailwind CSS کو استعمال کرنے، بدلنے اور شامل کرنے کی اجازت دیتا ہے۔ اس کا سورس کوڈ GitHub پر عوامی ہے، جہاں کوئی بھی اسے پڑھ سکتا ہے اور مسائل رپورٹ کر سکتا ہے۔