یہ مضمون درج ذیل خاکہ کا استعمال کرتے ہوئے Tailwind میں متن کو اسٹائل کرنے کے لیے ایک رہنما فراہم کرے گا۔
- ٹیکسٹ الائن کلاس استعمال کریں۔
- متنی مواد کو رنگ فراہم کریں۔
- مختلف فونٹ فیملیز استعمال کریں۔
- متن کو انڈر لائن ڈیکوریشن فراہم کریں۔
- متن کو انڈینٹیشن فراہم کریں۔
Tailwind میں ٹیکسٹ الائن کلاس کا استعمال کیسے کریں؟
متن کے مواد کو اسٹائل کرتے وقت، متن کی پوزیشننگ اتنی ہی اہم ہے جتنی کہ سجاوٹ۔ اگر متن کو درست طریقے سے منسلک نہیں کیا گیا ہے، تو ویب صفحہ کا پورا ڈیزائن عجیب نظر آئے گا۔ Tailwind میں متن کو سیدھ میں لانے کے لیے، درج ذیل کلاس کا استعمال کیا جاتا ہے:
متن- { سیدھ }
صف بندی کے اختیارات میں شامل ہیں ' مرکز '،' بائیں '،' صحیح '، اور ' جواز پیش کرنا ' آئیے ذیل کے مظاہرے کا استعمال کرتے ہوئے ان صف بندیوں میں سے ہر ایک کو سمجھیں:
< ص کلاس = ٹیکسٹ سینٹر bg-slate-200 > یہ ایک نمونہ متن ہے اور یہ ٹیکسٹ سینٹر سیدھ کے ساتھ فراہم کیا گیا ہے۔ < / ص >
< بی آر >
< ص کلاس = 'متن-دائیں bg-slate-200' > یہ ایک نمونہ متن ہے اور یہ متن کی دائیں سیدھ کے ساتھ فراہم کیا گیا ہے۔ < / ص >
< بی آر >
< ص کلاس = 'متن-بائیں bg-slate-200' > یہ ایک نمونہ متن ہے اور یہ TEXT بائیں سیدھ کے ساتھ فراہم کیا گیا ہے۔ < / ص >
< بی آر >
< ص کلاس = متن کا جواز فراہم کریں bg-slate-200 > یہ ایک نمونہ متن ہے اور یہ TEXT JUSTIFY سیدھ کے ساتھ فراہم کیا گیا ہے۔ < / ص >
مندرجہ بالا کوڈ کی وضاحت اس طرح ہے:
- چار' ص ' عناصر ایک لائن بریک کے ذریعہ بنائے جاتے ہیں اور الگ ہوتے ہیں۔
- چار پی عناصر کے متن کو 'کا استعمال کرتے ہوئے ایک مخصوص پوزیشن کے ساتھ منسلک کیا جاتا ہے۔ متن-{سیدھ} 'کلاس.
- ' bg-{color}-{number} 'کلاس ہر ایک کے لئے پس منظر کا رنگ فراہم کرتا ہے' ص ' عنصر.
آؤٹ پٹ
یہ نیچے دیے گئے آؤٹ پٹ میں دیکھا جا سکتا ہے کہ سیدھ میں آنے والی ہر کلاس ٹیکسٹ پوزیشن کو کیسے متاثر کرتی ہے۔ آپ دیکھ سکتے ہیں کہ پہلے عنصر کا متن مرکز کے طور پر منسلک ہے، دوسرا دائیں، تیسرا بائیں، اور چوتھا عنصر درست متن دکھا رہا ہے:
Tailwind میں متن کے مواد کو رنگ کیسے فراہم کیا جائے؟
رنگ کسی عنصر کے متنی مواد کو اسٹائل کرنے میں ایک اہم کردار ادا کرتا ہے۔ اگر مناسب رنگ منتخب نہیں کیا جاتا ہے، تو متن پڑھنا مشکل ہو سکتا ہے۔ یہ ترتیب کے ڈیزائن کو منفی طور پر متاثر کرے گا۔ Tailwind میں متن کا رنگ سیٹ کرنے کے لیے، ذیل میں دی گئی کلاس کا استعمال کریں:
متن- { رنگ } - { نمبر }اوپر بیان کردہ نحو میں، صارف کو رنگ کا نام فراہم کرنا ہوگا اور اس کے بعد ایک نمبر دیا جائے گا جو مخصوص رنگ کے شیڈ کے لیے ذمہ دار ہوگا۔
ذیل میں فراہم کردہ مظاہرے میں تین ہیں ' ص ' عناصر جو مختلف ٹیکسٹ کلر کلاسز کا استعمال کرتے ہوئے اسٹائل کیے گئے ہیں:
< ص کلاس = ٹیکسٹ-وائلٹ-500 ٹیکسٹ سینٹر > یہ بنفشی رنگ کا متن ہے۔ < / ص >< ص کلاس = 'ٹیکسٹ-ریڈ-500 ٹیکسٹ سینٹر' > یہ سرخ رنگ کا متن ہے۔ < / ص >
< ص کلاس = 'ٹیکسٹ-گرین-500 ٹیکسٹ سینٹر' > یہ سبز رنگ کا متن ہے۔ < / ص >
مندرجہ بالا کوڈ میں استعمال ہونے والی کلاسیں درج ذیل ہیں:
- پہلہ ' ص ' عنصر کا استعمال کرتے ہوئے ایک بنفشی رنگ کے ساتھ فراہم کیا جاتا ہے ' متن-{color}-{number} 'کلاس.
- دوسرا اور تیسرا' ص ” عناصر کو ایک ہی طریقہ استعمال کرتے ہوئے سرخ اور سبز رنگ فراہم کیے جاتے ہیں۔
- ' متن کا مرکز کلاس متن کے مواد کو عنصر کے مرکز میں رکھتی ہے۔
آؤٹ پٹ
نیچے دیے گئے آؤٹ پٹ سے یہ واضح ہے کہ ٹیکسٹ کا ڈیفالٹ سیاہ رنگ ٹیکسٹ-{color}-{number} کلاس کا استعمال کرتے ہوئے مخصوص رنگوں میں تبدیل کیا جاتا ہے:
Tailwind میں مختلف فونٹ فیملیز کا استعمال کیسے کریں؟
کسی متنی عنصر کا فونٹ کسی مخصوص متن پر زور دینے کے لیے استعمال کیا جا سکتا ہے۔ ہر فونٹ کی اپنی خصوصیات ہیں۔ Tailwind میں کسی عنصر کے فونٹ کو تبدیل کرنے کے لیے درج ذیل کلاس کو استعمال کریں:
فونٹ- { خاندان }ٹیل ونڈ تین ڈیفالٹ فونٹ فیملیز فراہم کرتا ہے یعنی “ بغیر '،' سیرف '، اور ' مونو ' ان فونٹ فیملیز میں سے ہر ایک کا فونٹ کا انداز مختلف ہے۔
اسی طرح، ' فونٹ-{وزن} ” کلاس کو متن کو بولڈ، ہلکا یا نارمل بنانے کے لیے استعمال کیا جا سکتا ہے۔ آئیے ٹیل ونڈ میں مختلف فونٹ فیملیز کو فونٹ ویٹ فراہم کرنے کے لیے ایک مظاہرہ استعمال کریں:
< ص کلاس = 'فونٹ-مونو فونٹ-ایکسٹرا بولڈ ٹیکسٹ سینٹر' > یہ مونو فونٹ میں ایک اضافی بولڈ ٹیکسٹ ہے۔ < / ص >< ص کلاس = 'فونٹ سیرف فونٹ-سیمبولڈ ٹیکسٹ سینٹر' > یہ فونٹ سیرف میں ایک سیمی بولڈ ٹیکسٹ ہے۔ < / ص >
< ص کلاس = 'font-sans font-extralight text-center' > یہ فونٹ SANS میں ایک اضافی ہلکا متن ہے۔ < / ص >
کوڈ کی وضاحت:
- تینوں ' ص ' عناصر 'مونو'، 'سرف'، اور 'سانس' فونٹ فیملیز کے ذریعہ فراہم کیے جاتے ہیں ' فونٹ-{خاندان} 'کلاس.
- اسی طرح تینوں ' ص 'عناصر فراہم کیے گئے ہیں' غیر معمولی '،' نیم بولڈ '، اور ' ایکسٹرا لائٹ 'فونٹ کا وزن' کا استعمال کرتے ہوئے فونٹ-{وزن} 'کلاس.
- یہ تمام عناصر استعمال کرتے ہیں ' متن کا مرکز 'کلاس جو متن کو عنصر کے بیچ میں رکھتی ہے۔
آؤٹ پٹ
دی گئی آؤٹ پٹ سے پتہ چلتا ہے کہ ہر ' ص ' عنصر کا ایک مختلف فونٹ فیملی اور فونٹ وزن ہے:
Tailwind میں متن کو انڈر لائن سجاوٹ کیسے فراہم کی جائے؟
متن کے عناصر کو مختلف قسم کے انڈر لائنز شامل کرکے بھی اسٹائل کیا جاسکتا ہے۔ یہ متن کے کسی حصے پر زور دینے کے لیے استعمال کیا جا سکتا ہے۔ متن کے عنصر کو انڈر لائنز فراہم کرنے کے لیے، درج ذیل کلاس کا استعمال کیا جاتا ہے:
انڈر لائن سجاوٹ- { انداز }لفظ ' انڈر لائن ' عنصر کو ایک بنیادی خط خط فراہم کرتا ہے اور ' سجاوٹ-{style} ” کلاس کا استعمال انڈر لائن کو مختلف انداز فراہم کرنے کے لیے کیا جاتا ہے۔ آئیے ذیل میں فراہم کردہ مظاہرے کا استعمال کرتے ہوئے اسے سمجھتے ہیں:
< ص کلاس = 'انڈر لائن سجاوٹ-ٹھوس ٹیکسٹ سینٹر' > اس متن میں ایک ٹھوس خاکہ ہے۔ < / ص >< ص کلاس = 'انڈر لائن ڈیکوریشن-ڈبل ٹیکسٹ سینٹر' > اس متن میں ڈبل انڈر لائن ہے۔ < / ص >
< ص کلاس = 'آرڈر لائن سجاوٹ لہراتی ٹیکسٹ سینٹر' > اس متن میں لہراتی انڈر لائن ہے۔ < / ص >
< ص کلاس = ' انڈر لائن ڈیکوریشن ڈاٹڈ ٹیکسٹ سینٹر' > اس متن میں ایک نقطے والی انڈر لائن ہے۔ < / ص >
مندرجہ بالا کوڈ میں، چار ہیں ' ص 'عناصر جو فراہم کیے گئے ہیں' ٹھوس '،' دگنا '،' لہراتی '، اور ' نقطہ دار ' اسٹائل شدہ انڈر لائنز۔
آؤٹ پٹ:
مندرجہ ذیل آؤٹ پٹ سے یہ واضح ہے کہ عناصر کو مختلف انڈر لائن ڈیکوریشن کلاسز کا استعمال کرتے ہوئے اسٹائل کیا گیا ہے۔
Tailwind میں متن کو انڈینٹیشن کیسے فراہم کیا جائے؟
کسی بھی ٹیکسٹ دستاویز میں، انڈینٹیشن کا استعمال ٹیکسٹ مواد کو فارمیٹ کرنے کے لیے کیا جاتا ہے۔ Tailwind درج ذیل کلاس کا استعمال کرتے ہوئے متنی مواد کو انڈینٹیشن فراہم کرنے کے لیے ایک ڈیفالٹ کلاس بھی فراہم کرتا ہے:
حاشیہ- { چوڑائی }اوپر بیان کردہ نحو میں چوڑائی متن کے مواد کو فراہم کردہ انڈینٹیشن مارجن کے سائز کے لیے ذمہ دار ہے۔
آئیے دو متنی عناصر کو مختلف انڈینٹیشن اقدار کے ساتھ تفویض کرکے اسٹائل کریں اور نتیجہ دیکھیں:
< ص کلاس = 'انڈینٹ-4 py-12' > یہ ایک نمونہ متن ہے اور اسے 'انڈینٹ-4' کلاس کا استعمال کرتے ہوئے انڈینٹیشن کے ساتھ فراہم کیا گیا ہے۔ < / ص >< ص کلاس = 'انڈینٹ-28' > یہ ایک نمونہ متن ہے اور اسے 'انڈینٹ-28' کلاس کا استعمال کرتے ہوئے انڈینٹیشن کے ساتھ فراہم کیا گیا ہے۔ < / ص >
مندرجہ بالا کوڈ میں، دو ' ص 'چوڑائی کے انڈینٹیشن کے ساتھ فراہم کیے گئے ہیں' 4 'اور' 28 'بالترتیب. پہلا عنصر بھی اوپر سے نیچے کی پیڈنگ کے ساتھ فراہم کیا جاتا ہے ' p-12 'کلاس.
آؤٹ پٹ:
یہ نیچے دیے گئے آؤٹ پٹ میں دیکھا جا سکتا ہے کہ دوسرے ٹیکسٹ عنصر کا متن کے شروع میں زیادہ مارجن ہوتا ہے کیونکہ انڈینٹیشن کی چوڑائی بڑی ہوتی ہے۔
یہ سب Tailwind کا استعمال کرتے ہوئے متن کو اسٹائل کرنے کے بارے میں ہے۔
نتیجہ
ٹیل ونڈ ٹیکسٹ عناصر کو اسٹائل کرنے کے لیے مختلف کلاسز فراہم کرتا ہے۔ Tailwind میں متن کو اسٹائل کرنے کے لیے، صارف استعمال کر سکتا ہے ' متن-{color}-{number} '،' متن-{سیدھ} '،' انڈر لائن سجاوٹ-{style} '، اور ' حاشیہ-{چوڑائی} 'کلاس. اس مضمون نے Tailwind میں مختلف کلاسز کا استعمال کرتے ہوئے متن کو اسٹائل کرنے کے لیے ایک گائیڈ فراہم کیا ہے۔