یہ تحریر ٹیل ونڈ میں بیس اسٹائل کو شامل کرکے اسٹائل ہیڈنگ کے طریقہ کار کی وضاحت کرے گی۔
بیس اسٹائل ٹیل ونڈ کا استعمال کرتے ہوئے ہیڈنگ کو کیسے اسٹائل کریں؟
Tailwind میں عنوانات کو اسٹائل کرنے کے لیے، فراہم کردہ مراحل کو دیکھیں:
- پروجیکٹ کی سی ایس ایس فائل کھولیں۔
- CSS فائل میں، 'کا استعمال کرتے ہوئے ہیڈنگز میں بیس اسٹائل شامل کریں۔ پرت 'کے تحت ہدایت' @tailwind بیس؛ 'ہدایت.
- ایک HTML پروگرام بنائیں اور اس میں سرخی والے عناصر کا استعمال کریں۔
- HTML پروگرام چلائیں اور آؤٹ پٹ کی تصدیق کریں۔
مرحلہ 1: CSS فائل میں ہیڈنگز میں بیس اسٹائل شامل کریں۔
سب سے پہلے، کھولیں ' style.css فائل کریں اور اس میں عنوانات میں بیس اسٹائل شامل کریں پرت 'ہدایت. مثال کے طور پر، ہم نے بنیادی سٹائل کو درج ذیل عنوانات میں شامل کیا ہے۔
@tailwind بنیاد ;
پرت بنیاد {
h1 {
@درخواست دیں text-6xl ;
}
h2 {
@درخواست دیں text-5xl ;
}
h3 {
@درخواست دیں text-4xl ;
}
h4 {
@درخواست دیں text-3xl ;
}
h5 {
@درخواست دیں text-2xl ;
}
}
@tailwind اجزاء ;
@tailwind افادیت ;
یہاں:
- ' @layer بیس { … } ” ایک نئی بنیادی تہہ کی وضاحت کرتا ہے اور اس میں سرخی کے اجزاء کے لیے طرزیں شامل ہیں۔
- ' h1 { @apply text-6xl؛ } ' لاگو ہوتا ہے ' text-6xl 'یوٹیلٹی کلاس کو' h1 ' عناصر.
- اسی طرح، ' h2 '،' h3 '،' h4 '، اور ' h5 ' عناصر کا استعمال کرتے ہوئے ان کے فونٹ سائز سیٹ ہوتے ہیں ' @درخواست دیں اور متعلقہ یوٹیلیٹی کلاسز (text-5xl، text-4xl، text-3xl، اور text-2xl)۔
مرحلہ 2: ہیڈنگز کا استعمال کرتے ہوئے HTML ویب صفحہ بنائیں
پھر، HTML پروگرام بنائیں اور اس میں سرخی والے عناصر کا استعمال کریں۔ یہاں، ہم نے مندرجہ ذیل عنوانات کا استعمال کیا ہے:
< جسم >
< div کلاس = 'h-screen justify-center text-center bg-violet-400' >
< h1 > سرخی 1 < / h1 >
< h2 > سرخی 2 < / h2 >
< h3 > سرخی 3 < / h3 >
< h4 > سرخی 4 < / h4 >
< h5 > سرخی 5 < / h5 >
< / div >
< / جسم >
مرحلہ 3: HTML پروگرام چلائیں۔
آخر میں، HTML پروگرام چلائیں اور تصدیق کے لیے ویب صفحہ دیکھیں:
مندرجہ بالا آؤٹ پٹ نے عنوانات کو ظاہر کیا ہے جیسا کہ وہ سی ایس ایس فائل میں اسٹائل تھے۔
نتیجہ
Tailwind میں عنوانات کو اسٹائل کرنے کے لیے، CSS فائل کھولیں، اور 'کا استعمال کرتے ہوئے ہیڈنگز میں بیس اسٹائل شامل کریں۔ پرت 'کے تحت ہدایت' @tailwind بیس؛ 'ہدایت. پھر، ایک HTML پروگرام بنائیں اور اس میں سرخی والے عناصر کا استعمال کریں۔ آخر میں، آؤٹ پٹ کی تصدیق کے لیے HTML ویب صفحہ دیکھیں۔ اس تحریر نے ٹیل ونڈ میں بیس اسٹائل کو شامل کرکے اسٹائل ہیڈنگ کے طریقہ کار کی وضاحت کی ہے۔