= 'h-screen p-10 sm:bg-red-700 md:bg-blue-600 lg:bg-green-500 xl:bg-pink-700' >

= 'text-3xl m-5 sm: text-white text-center' >

لینکس کا اشارہ!

>

= 'text-2xl m-5 md: text-white text-center' >

اس ٹیوٹوریل میں خوش آمدید

>

= 'text-2xl m-5 lg: ٹیکسٹ-وائٹ ٹیکسٹ سینٹر' >

ٹیل ونڈ سی ایس ایس

>

= 'متن-2xl m-5 xl: متن-سفید متن-مرکز' >

تھیمز

>

>

جسم >

یہاں:

• ' -p-10 'اور' m-5 ” وقفہ کاری کی خاصیت ہیں۔
• ' sm '،' md '،' ایل جی '، اور ' xl 'اسکرین کی خصوصیات ہیں۔
• ' سرخ -700 '،' نیلا-600 '،' سبز -500 '،' گلابی -700 '، اور ' سفید ” رنگ کی خصوصیات ہیں۔

مرحلہ 2: HTML پروگرام چلائیں۔

پھر، HTML ویب صفحہ دیکھنے کے لیے HTML پروگرام چلائیں:

مندرجہ بالا آؤٹ پٹ میں، ڈیفالٹ اسکرینز، رنگ، اور وقفہ کاری کی خصوصیات دیکھی جا سکتی ہیں۔

ٹیل ونڈ تھیم میں اسکرینز، رنگ اور اسپیسنگ کو کیسے ترتیب دیں؟

Tailwind تھیم میں اسکرینوں، رنگوں اور اسپیسنگ کو ترتیب دینے کے لیے، فراہم کردہ مراحل کو دیکھیں:

• کھولو ' tailwind.config.js 'فائل.
• پر جائیں ' خیالیہ ” سیکشن اور ضرورت کے مطابق اسکرینوں، رنگوں اور اسپیسنگ کی خصوصیات کو حسب ضرورت بنائیں۔
• HTML پروگرام میں اپنی مرضی کے مطابق خصوصیات استعمال کریں۔
• تصدیق کے لیے HTML ویب صفحہ دیکھیں۔

مرحلہ 1: Tailwind Config فائل میں اسکرینز، رنگ، اور فاصلہ کنفیگر کریں

میں ' خیالیہ ' کا حصہ ' tailwind.config.js ” فائل، ضرورت کے مطابق اسکرینوں، رنگوں اور اسپیسنگ کی خصوصیات کو اپنی مرضی کے مطابق بنائیں۔ مثال کے طور پر، ہم نے ان خصوصیات کو حسب ذیل بنایا ہے:

ماڈیول برآمدات = {

مواد : [ './index.html' ] ,

خیالیہ : {

// اسکرینوں کو اپنی مرضی کے مطابق بنانا

اسکرینز : {

sm : '480px' ,

md : '668px' ,

ایل جی : '876px' ,

xl : '1100px' ,

} ,

// اپنی مرضی کے مطابق رنگ

رنگ : {

سفید : #ffffff ,

سیاہ : '#000000' ,

نیلا : '#08609c' ,

سبز : '#089c28' ,

سرخ : '#9c0306' ,

پیلا : '#ede60e' ,

گلابی : '#ed0e55' ,

} ,

// وقفہ کاری کو حسب ضرورت بنانا

وقفہ کاری : {

px : '1px' ,

'0' : '0' ,

'1' : '0.25 ریم' ,

'2' : '0.5 ریم' ,

'3' : '0.75 ریم' ,

'4' : '1 چیز' ,

'5' : '1.25 ریم' ,

'6' : '1.5 ریم' ,

'8' : '2ریم' ,

'10' : '2.5 ریم' ,

'12' : '3ریم' ,

'16' : '4ریم' ,

'بیس' : '5ریم' ,

}

} ,

} ;

اس کوڈ میں:

• ' اسکرینز پراپرٹی مختلف سائز کے لیے اسکرین بریک پوائنٹس کی وضاحت کرتی ہے۔ یہ عرفی نام (جیسے sm, md, lg, xl) اور ان کے مساوی اقدار فراہم کرتا ہے۔
• ' رنگ پراپرٹی اپنے نام اور ہیکسا ڈیسیمل ویلیو کے جوڑے استعمال کرتے ہوئے اپنی مرضی کے رنگوں کی وضاحت کرتی ہے۔
• ' وقفہ کاری پراپرٹی بہت سے سائزوں کے لیے اپنی مرضی کے مطابق وقفہ کاری کی قدریں بتاتی ہے۔ یہ 'ریم' یونٹس میں مخصوص وقفہ کاری کی اقدار کی نمائندگی کرنے کے لیے عرفی نام (جیسے px، 0، 1، 2، وغیرہ) استعمال کرتا ہے۔

مرحلہ 2: HTML پروگرام میں کنفیگرڈ پراپرٹیز استعمال کریں۔

اب، HTML پروگرام میں اپنی مرضی کے مطابق خصوصیات کا استعمال کریں:

<جسم >