یہ مضمون Tailwind میں ایک پیش سیٹ بنانے کے مکمل طریقہ کار کی وضاحت کرتا ہے۔
Tailwind میں 'پریس سیٹ' کیسے بنائیں؟
ٹیل ونڈ' presets ' کو ریگولر کنفیگریشن آبجیکٹ سمجھا جاتا ہے جو وہی کنفیگریشن بتاتے ہیں جیسا کہ 'tailwind.config.js' کنفیگریشن فائل میں بیان کیا گیا ہے۔ 'پیش سیٹ' فائل ڈیفالٹ کے طور پر نہیں بنائی جاتی ہے تاہم اسے نیچے دیے گئے اقدامات پر عمل کرکے بنایا جا سکتا ہے۔
مرحلہ 1: ایک 'پیش سیٹ' فائل بنائیں
سب سے پہلے، تخلیق کریں ' preset.js Tailwind پروجیکٹ میں فائل کریں اور تمام مطلوبہ کنفیگریشن آپشنز شامل کریں جیسے کہ ایکسٹینشن، تھیم اوور رائیڈز، پلگ انز شامل کرنا، اور بہت کچھ:
// مثال پیش سیٹ
ماڈیول برآمدات = {
خیالیہ : {
رنگ : {
نیلا : {
روشنی : '#85d7ff' ,
ڈیفالٹ : '#1fb6ff' ,
اندھیرا : '#009 سیڈل' ,
} ,
گلابی : {
روشنی : '#ff7ce5' ,
ڈیفالٹ : '#ff49db' ,
اندھیرا : '#ff16d1' ,
} ,
سرمئی : {
تاریک ترین : '#1f2d3d' ,
اندھیرا : '#3c4858' ,
ڈیفالٹ : '#c0cc میں' ,
روشنی : '#e0e6ed' ,
سب سے ہلکا : '#f9fafc' ,
}
} ,
فونٹ فیملی : {
بغیر : [ 'گرافک' , 'سینز سیرف' ] ,
} ,
دبائیں' Ctrl+S مندرجہ بالا فائل کو محفوظ کرنے کے لیے۔
مرحلہ 2: 'tailwind.config.js' فائل میں ترمیم کریں۔
اگلا، پر جائیں ' tailwind.config.js 'کنفیگریشن فائل، ٹیمپلیٹ کے راستوں کے نام کی وضاحت کے ساتھ ساتھ ' preset.js ' کے ساتھ فائل ' presets مطلوبہ لفظ:
ماڈیول برآمدات = {
مواد : [
'./index.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
presets : [
( 'preset.js' )
]
}
دبائیں' Ctrl+S فائل کو محفوظ کرنے کے لیے۔
مرحلہ 3: ایپلیکیشن چلائیں۔
اب، موجودہ چلائیں ' تیز پروجیکٹ ' درج ذیل کمانڈ کو درج کرکے ڈویلپمنٹ سرور میں:
این پی ایم رن دیو 
آخر میں، آؤٹ پٹ دکھانے کے لیے 'لوکل ہوسٹ' لنک پر کلک کریں۔
آؤٹ پٹ
جیسا کہ دیکھا گیا ہے، آؤٹ پٹ 'ٹیل ونڈ CSS' اسٹائل کے ساتھ ایک وائٹ پروجیکٹ واپس کرتا ہے۔
نتیجہ
Tailwin میں، ایک ' پیش سیٹ 'پروجیکٹ میں فائل کریں اور تمام کنفیگریشنز کی وضاحت کریں' tailwind.config.js اس میں فائل۔ اس کے بعد، 'preset.js' فائل کو 'tailwind.config.js' فائل میں 'پری سیٹ' کلیدی لفظ کی مدد سے واضح کریں۔ نئی بنائی گئی 'preset.js' فائل تمام حسب ضرورت CSS کو مخصوص ٹیمپلیٹ پر ایمبیڈ کر دے گی جس طرح 'tailwind.config.js' فائل ہے۔ اس مضمون نے Tailwind میں ایک پیش سیٹ بنانے کے مکمل طریقہ کار کو ظاہر کیا ہے۔