टेलविंड में प्रीसेट कैसे बनाएं

Telavinda Mem Priseta Kaise Bana Em



' टेलविंड सीएसएस ' अपने सभी कस्टम कॉन्फ़िगरेशन को 'tailwind.config.js' फ़ाइल में निष्पादित करता है जो स्वचालित रूप से डिफ़ॉल्ट कॉन्फ़िगरेशन के साथ मर्ज हो जाता है। इस तरह के मामलों में, ' टेलविंड प्रीसेट ” उपयोक्ताओं को अलग से अपना स्वयं का विन्यास बनाने में मदद करता है। 'टेलविंड प्रीसेट' मूल रूप से उपयोगकर्ता-पुन: प्रयोज्य कॉन्फ़िगरेशन है जो एक अलग कॉन्फ़िगरेशन निर्दिष्ट करता है जिसे आधार के रूप में उपयोग किया जा सकता है। यह अनुकूलन बनाने का सबसे आसान तरीका प्रदान करता है जिसे उपयोगकर्ता कई परियोजनाओं में पुन: उपयोग करना चाहता है। यह डिफ़ॉल्ट टेलविंड कॉन्फ़िगरेशन को पूरी तरह से बदलने में उपयोगकर्ताओं की सहायता करता है।

यह लेख टेलविंड में प्रीसेट बनाने की पूरी प्रक्रिया के बारे में विस्तार से बताता है।

टेलविंड में 'प्रीसेट' कैसे बनाएं?

टेलविंड ” प्रीसेट ' को नियमित कॉन्फ़िगरेशन ऑब्जेक्ट माना जाता है जो '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' कीवर्ड की मदद से निर्दिष्ट करें। नई बनाई गई 'प्रीसेट.जेएस' फ़ाइल सभी कस्टम सीएसएस को 'टेलविंड.कॉन्फिग.जेएस' फ़ाइल के समान निर्दिष्ट टेम्पलेट पर एम्बेड करेगी। इस लेख में टेलविंड में प्रीसेट बनाने की पूरी प्रक्रिया को दिखाया गया है।