یہ پوسٹ Tailwind CSS میں 'بیس اسٹائلز' کو شامل کرنے کے تمام ممکنہ پہلوؤں کی وضاحت کرتی ہے۔
ٹیل ونڈ میں 'بیس' اسٹائلز کیسے شامل کریں؟
'Tailwind CSS' پورے HTML مواد میں یا کسی مخصوص عنصر میں 'بیس' طرزیں شامل کرنے کے لیے درج ذیل تین طریقوں کے ساتھ آتا ہے:
- Tailwind میں بنیادی طرزیں شامل کرنے کے لیے 'CSS' کا استعمال کریں۔
- Tailwind میں بنیادی طرزیں شامل کرنے کے لیے 'Plugin' استعمال کریں۔
آئیے ایک ایک کرکے ان کو دریافت کریں۔
شرطیں
عملی نفاذ کی طرف بڑھنے سے پہلے، سب سے پہلے، 'Linuxhint' کے نام سے نئے بنائے گئے پروجیکٹ پر ایک نظر ڈالیں جو 'بیس اسٹائلز' کو شامل کرنے کے لیے استعمال ہوتا ہے:
پروجیکٹ فائل کا ڈھانچہ
اب، 'index.html' فائل پر جائیں اور اس کے HTML کوڈ پر ایک نظر ڈالیں:
< html >< سر >
< لنک href = '/dist/output.css' rel = 'اسٹائل شیٹ' >
< / سر >
< جسم >
< h2 کلاس = 'انڈر لائن ٹیکسٹ سینٹر فونٹ-بولڈ ٹیکسٹ-گلابی-600' > Linuxhint میں خوش آمدید! < / h2 >< بی آر >
< h3 کلاس = 'ٹیکسٹ-سینٹر فونٹ-بولڈ ٹیکسٹ-اورنج-600' > ٹیوٹوریل: Tailwind میں بنیادی طرزیں شامل کرنا۔ < / h3 >< بی آر >
< / جسم >
مندرجہ بالا کوڈ لائنوں میں:
آؤٹ پٹ
مندرجہ بالا کوڈ کا آؤٹ پٹ یہاں دکھایا گیا ہے:
اب مندرجہ بالا ایچ ٹی ایم ایل کوڈ کو بیس اسٹائلز شامل کرکے اپنی مرضی کے مطابق بنانے کے لیے زیر بحث طریقہ استعمال کریں۔ آئیے Tailwind 'CSS' طریقہ سے شروع کرتے ہیں۔
طریقہ 1: Tailwind میں 'بیس اسٹائلز' شامل کرنے کے لیے CSS کا استعمال کریں۔
مخصوص HTML عنصر میں بنیادی طرز شامل کرنے کا سب سے آسان اور آسان طریقہ یہ ہے کہ انہیں پروجیکٹ کی مرکزی CSS فائل میں شامل کیا جائے۔ آئیے دیے گئے مراحل پر عمل کرتے ہوئے اس کام کو عملی طور پر انجام دیں۔
مرحلہ 1: CSS فائل کھولیں۔
سب سے پہلے مین CSS فائل کھولیں یعنی ' style.css ' جس میں بلٹ ان ٹیل ونڈ 'بیس'، 'اجزاء'، اور 'یوٹیلیٹیز' پرتیں شامل ہیں:
مرحلہ 2: CSS شامل کریں۔
اس کے بعد، مخصوص '
' اور '' HTML عناصر کے لیے 'بیس' اسٹائل شامل کریں @درخواست دیں 'کی مدد سے 'بیس' پرت میں ہدایت پرت 'کلیدی لفظ. '@layer' کلیدی الفاظ مخصوص 'بیس' پرت پر متعین کلاسز کو شامل کرتے ہیں: پرت کی بنیاد {
h2 {
@Apply text-3xl؛
}
h3 {
@Apply text-xl؛
}
}
h2 {
@Apply text-3xl؛
}
h3 {
@Apply text-xl؛
}
}
مندرجہ بالا کوڈ لائنوں میں، ' حرف کا سائز ' کلاس کا اطلاق '
' اور '' عناصر پر ہوتا ہے تاکہ انہیں بالترتیب مخصوص سائز تک بڑھایا جا سکے۔
فائل کو (Ctrl + S) محفوظ کریں۔
مرحلہ 3: آؤٹ پٹ
اب، کوڈ کو لائیو سرور میں چلائیں اور آؤٹ پٹ دیکھیں، جیسا کہ:
یہاں، آؤٹ پٹ سے پتہ چلتا ہے کہ ٹیل ونڈ 'فونٹ سائز' کلاس کو بیس لیئر میں مخصوص عنصر پر کامیابی کے ساتھ لاگو کیا گیا ہے۔
نوٹ : یہی طریقہ دیگر تمام Tailwind CSS کلاسز کے لیے استعمال کیا جاتا ہے۔
طریقہ 2: Tailwind میں 'بیس اسٹائلز' شامل کرنے کے لیے پلگ ان کا استعمال کریں۔
'بیس' طرزیں شامل کرنے کا ایک اور مفید طریقہ یہ ہے کہ ' رابطہ بحال کرو 'اور استعمال کریں' addBase() فنکشن یہ فنکشن نئی کلاسز کو رجسٹر کرنے میں مدد کرتا ہے۔ بنیاد 'پرت کی ہدایت۔ یہ فنکشن Tailwind 'tailwind.config.js' فائل میں استعمال ہوتا ہے۔ آئیے اسے عملی طور پر کرتے ہیں۔
مرحلہ 1: 'addBase()' فنکشن کی وضاحت کریں۔
سب سے پہلے، پر جائیں ' tailwind.config.js کنفیگریشن فائل اور پلگ ان سے بیس اسٹائلز شامل کریں اور 'addBase()' فنکشن کو کال کریں:
فائل کو محفوظ کریں۔
مرحلہ 2: آؤٹ پٹ
آخر میں، دیئے گئے HTML کوڈ کو چلائیں اور آؤٹ پٹ دیکھیں:
جیسا کہ دیکھا گیا ہے، Tailwind 'Font Size' کلاس کو 'addBase()' فنکشن میں جاوا اسکرپٹ آبجیکٹ کے طور پر متعین کردہ HTML عناصر پر لاگو کیا جاتا ہے۔
نتیجہ
ٹیل ونڈ بیس اسٹائلز کو آسانی سے شامل کیا جا سکتا ہے۔ سی ایس ایس مرکزی سی ایس ایس فائل میں کلاسز اور ' رابطہ بحال کرو ' کے ساتہ ' addBase() کنفیگریشن فائل میں فنکشن۔ 'CSS' طریقہ کو سب سے آسان طریقہ سمجھا جاتا ہے کیونکہ یہ صرف 'بیس' پرت میں بنیادی طرزوں کی وضاحت کرتا ہے اور خود بخود انہیں مخصوص عنصر پر نافذ کرتا ہے۔ دوسری طرف، 'پلگ ان' سیکشن ' tailwind.config.js ' فائل کو جاوا اسکرپٹ آبجیکٹ کے طور پر بیس اسٹائل کی وضاحت کرنے کے لیے 'addBase()' فنکشن کی ضرورت ہوتی ہے۔ اس پوسٹ نے Tailwind CSS میں بیس اسٹائلز شامل کرنے کے لیے تمام ممکنہ پہلوؤں کی وضاحت کی ہے۔