یہ مضمون Tailwind یوٹیلیٹیز کا استعمال کرتے ہوئے کسی عنصر کے فونٹ فیملی کو کنٹرول کرنے کا طریقہ کار فراہم کرتا ہے۔
ٹیل ونڈ یوٹیلیٹیز کا استعمال کرتے ہوئے کسی عنصر کے فونٹ فیملی کو کیسے کنٹرول کیا جائے؟
ٹیل ونڈ میں کسی عنصر کے فونٹ فیملی کو کنٹرول کرنے کے لیے، عنصر کو درج ذیل یوٹیلیٹی فراہم کرنا ہو گی۔
فونٹ- { فونٹ فیملی }
تین ڈیفالٹ فونٹ فیملیز ہیں جنہیں اوپر فراہم کردہ یوٹیلیٹی کا استعمال کرتے ہوئے سیٹ کیا جا سکتا ہے۔ یہ شامل ہیں ' سیرف '،' بغیر '، اور ' مونو '
آئیے ان فونٹ فیملیز کو ایک مظاہرے میں استعمال کرتے ہیں ' فونٹ-{فونٹ فیملی} 'کلاس یہ دیکھنے کے لیے کہ یہ کیسے کام کرتا ہے:
< div کلاس = 'فونٹ سیرف راؤنڈ-ایکس ایل شیڈو-ایل جی ٹیکسٹ سینٹر py-2 my-2 bg-green-100' >
یہ فونٹ سیرف فیملی ہے۔
< / div >
< div کلاس = 'font-sans rounded-xl shadow-lg text-center py-2 my-2 bg-blue-100' >
یہ FONT-SANS فیملی ہے۔
< / div >
< div کلاس = 'font-mono rounded-xl shadow-lg text-center py-2 my-2 bg-red-100' >
یہ فونٹ مونو فیملی ہے۔
< / div >
مندرجہ بالا کوڈ کی وضاحت اس طرح ہے:
- 'کا استعمال کرتے ہوئے تین div عناصر بنائے گئے ہیں اور مختلف فونٹ فیملیز کے ساتھ فراہم کیے جاتے ہیں۔
- ' فونٹ-{خاندان} کلاس عنصر میں متن کو مخصوص فونٹ فیملی فراہم کرے گی۔
- ' rounded-xl کلاس div عنصر کے کونوں کو گول بنا دے گی۔
- ' shadow-lg کلاس div عنصر کو ایک بڑا سایہ فراہم کرے گی۔
- ' متن کا مرکز ' متن کو عنصر کے مرکز میں سیدھ میں کر دے گا۔
- ' py-2 'اور' my-2 'کلاسز فراہم کریں گے' 8px عنصر کے اوپر اور نیچے کی سمت میں پیڈنگ اور مارجن۔
- ' bg-{color}-{number} عنصر کے پس منظر کو مخصوص رنگ پر سیٹ کرنے کے لیے کلاس ذمہ دار ہے۔
آؤٹ پٹ سے، یہ واضح ہے کہ ہر عنصر کا ایک مختلف فونٹ فیملی ہے:
ہم ہوور فنکشن کا استعمال کرتے ہوئے کسی عنصر کے فونٹ فیملی کو بھی متحرک طور پر تبدیل کر سکتے ہیں۔ مثال کے لیے، درج ذیل کوڈ کے ذریعے جائیں:
< div کلاس = 'my-2 rounded-xl bg-slate-100 py-2 text-center font-mono shadow-lg hover:font-serif' یہ ڈیفالٹ کے لحاظ سے ایک FONT-MONO فیملی ہے< / div >اوپر فراہم کردہ کوڈ میں، ' ہوور: فونٹ-{خاندان} جیسے ہی ماؤس کرسر اس پر منڈلاتا ہے عنصر کے فونٹ فیملی کو تبدیل کرنے کے لیے یوٹیلیٹی ذمہ دار ہے۔ آؤٹ پٹ میں دیکھا جا سکتا ہے کہ جب صارف ماؤس کرسر کو اس پر گھماتا ہے تو متن کا فونٹ فیملی تبدیل ہو جاتی ہے۔
یہ سب Tailwind میں کسی عنصر کے فونٹ فیملی کو کنٹرول کرنے کے بارے میں ہے۔
نتیجہ
Tailwind میں، ایک عنصر کو 'کا استعمال کرتے ہوئے ایک فونٹ فیملی تفویض کیا جا سکتا ہے فونٹ-{خاندان} 'کلاس. ٹیل ونڈ کی طرف سے فراہم کردہ تین ڈیفالٹ فونٹ فیملیز ہیں یعنی “ بغیر '،' سیرف '، اور ' مونو ' صارف عنصر کی حالت کی تبدیلی پر کسی عنصر کے فونٹ فیملی کو بھی تبدیل کر سکتا ہے۔ اس مضمون نے ٹیل ونڈ میں کسی عنصر کے فونٹ فیملی کو کنٹرول کرنے کا طریقہ کار فراہم کیا ہے۔