यह लेख टेलविंड में प्रीसेट बनाने की पूरी प्रक्रिया के बारे में विस्तार से बताता है।
टेलविंड में 'प्रीसेट' कैसे बनाएं?
टेलविंड ” प्रीसेट ' को नियमित कॉन्फ़िगरेशन ऑब्जेक्ट माना जाता है जो 'tailwind.config.js' कॉन्फ़िगरेशन फ़ाइल में निर्दिष्ट कॉन्फ़िगरेशन को निर्दिष्ट करता है। 'प्रीसेट' फ़ाइल डिफ़ॉल्ट रूप से नहीं बनाई जाती है, लेकिन इसे नीचे दिए गए चरणों का पालन करके बनाया जा सकता है:
चरण 1: एक 'प्रीसेट' फ़ाइल बनाएँ
सबसे पहले, एक 'बनाएं प्रीसेट.जेएस ' टेलविंड प्रोजेक्ट में फाइल करें और सभी वांछित कॉन्फ़िगरेशन विकल्प जैसे एक्सटेंशन, थीम ओवरराइड, प्लगइन्स जोड़ना, और बहुत कुछ जोड़ें:
// उदाहरण प्रीसेट
मापांक। निर्यात = {
थीम : {
रंग की : {
नीला : {
रोशनी : '#85d7ff' ,
गलती करना : '#1fb6ff' ,
अँधेरा : '#009 काठी' ,
} ,
गुलाबी : {
रोशनी : '#ff7ce5' ,
गलती करना : '#ff49db' ,
अँधेरा : '#ff16d1' ,
} ,
स्लेटी : {
अंधेरे : '#1f2d3d' ,
अँधेरा : '#3c4858' ,
गलती करना : '#c0cc में' ,
रोशनी : '#e0e6ed' ,
सबसे हल्का : '#f9fafc' ,
}
} ,
फुहारा परिवार : {
बिना : [ 'ग्राफिक' , 'सान्स सेरिफ़' ] ,
} ,
प्रेस ' सीटीआरएल+एस ”उपरोक्त फाइल को सेव करने के लिए।
चरण 2: 'tailwind.config.js' फ़ाइल संपादित करें
अगला, 'पर नेविगेट करें टेलविंड.कॉन्फिग.जेएस 'विन्यास फ़ाइल, टेम्पलेट पथों का नाम निर्दिष्ट करें और साथ ही निर्दिष्ट करें' प्रीसेट.जेएस 'के साथ फ़ाइल' प्रीसेट 'कीवर्ड:
मापांक। निर्यात = {
संतुष्ट : [
'./index.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
प्रीसेट : [
( 'प्रीसेट.जेएस' )
]
}
प्रेस ' सीटीआरएल+एस ” फाइल को सेव करने के लिए।
चरण 3: एप्लिकेशन चलाएँ
अब, मौजूदा चलाएं ' तेजी से परियोजना 'निम्न कमांड दर्ज करके विकास सर्वर में:
एनपीएम रन देव
अंत में, आउटपुट दिखाने के लिए “लोकलहोस्ट” लिंक पर क्लिक करें।
उत्पादन
जैसा कि देखा गया है, आउटपुट 'टेलविंड सीएसएस' स्टाइल के साथ एक महत्वपूर्ण प्रोजेक्ट लौटाता है।
निष्कर्ष
टेलविंड में, “बनाएं पूर्व निर्धारित 'प्रोजेक्ट में फ़ाइल करें और' के सभी कॉन्फ़िगरेशन निर्दिष्ट करें टेलविंड.कॉन्फिग.जेएस ' इसमें फाइल करें। उसके बाद, 'preset.js' फ़ाइल को 'tailwind.config.js' फ़ाइल में 'preset' कीवर्ड की मदद से निर्दिष्ट करें। नई बनाई गई 'प्रीसेट.जेएस' फ़ाइल सभी कस्टम सीएसएस को 'टेलविंड.कॉन्फिग.जेएस' फ़ाइल के समान निर्दिष्ट टेम्पलेट पर एम्बेड करेगी। इस लेख में टेलविंड में प्रीसेट बनाने की पूरी प्रक्रिया को दिखाया गया है।