Tailwind CSS में टेम्प्लेट पथ कैसे कॉन्फ़िगर करें

यह पोस्ट Tailwind CSS में टेम्प्लेट पथों को कॉन्फ़िगर करने की प्रक्रिया को प्रदर्शित करती है।

Tailwind CSS में टेम्प्लेट पथ कैसे कॉन्फ़िगर करें?

' टेलविंड.कॉन्फिग.जेएस ” कॉन्फ़िगरेशन फ़ाइल का उपयोग उस टेम्प्लेट पथ को कॉन्फ़िगर करने के लिए किया जाता है जिसमें उपयोगकर्ता Tailwind CSS को एम्बेड करना चाहता है। यह डिफ़ॉल्ट रूप से मौजूद नहीं है हालांकि इसे 'एनपीएम' पैकेज मैनेजर का उपयोग करके प्रोजेक्ट में बनाया जा सकता है।

यह खंड 'tailwind.config.js' फ़ाइल में टेम्पलेट पथों को कॉन्फ़िगर करने के लिए कुछ आवश्यक कदम उठाता है।

टिप्पणी : 'टेलविंड सीएसएस' लागू करने के लिए, पहले ' नोड.जेएस प्रदान किए गए लिंक के माध्यम से आपके सिस्टम में एप्लिकेशन ' https://nodejs.org/en 'आदेशों को निष्पादित करने के लिए।

चरण 1: 'टेलविंडसीएसएस' स्थापित करें
सबसे पहले, “Project1” नाम से एक नया प्रोजेक्ट बनाएं और इसे कोड एडिटर में खोलें। अब, नया टर्मिनल खोलें और निम्न आदेश की सहायता से 'टेलविंड सीएसएस' स्थापित करें:

उपरोक्त आदेश में, ' NPM ' नोड पैकेज मैनेजर है जो 'टेलविंडसीएसएस' को निम्नानुसार स्थापित करता है:

यहां आउटपुट दिखाता है कि 'टेलविंड सीएसएस' और इसके पैकेज सफलतापूर्वक डाउनलोड हो गए हैं।

चरण 2: टेलविंड कॉन्फ़िगरेशन फ़ाइल बनाएँ
इसके बाद, Tailwind CSS कॉन्फ़िगरेशन फ़ाइल बनाएं “ टेलविंड.कॉन्फिग.जेएस ' अपनी कार्यक्षमता का विस्तार करने के लिए जैसे HTML टेम्पलेट पथ निर्दिष्ट करना, उपयोगकर्ता-परिभाषित वर्ग, और कई अन्य इस आदेश का उपयोग कर रहे हैं:

आउटपुट दिखाता है कि निर्दिष्ट कॉन्फ़िगरेशन फ़ाइल बनाई गई है। अब, 'पर एक नज़र डालें टेलविंड.कॉन्फिग.जेएस ' फ़ाइल:

चरण 3: मुख्य सीएसएस फ़ाइल में टेलविंड निर्देश जोड़ें
अब, बनाए गए Tailwind प्रोजेक्ट में विशेष कार्यात्मकता जोड़ने के लिए, निम्नलिखित तीन पहले से मौजूद Tailwind निर्देशों को मुख्य में जोड़ें ' शैली.सीएसएस ' फ़ाइल:

उपरोक्त कोड ब्लॉक में:

• आधार : यह 'टेलविंड सीएसएस' की पहली परत है जो डिफ़ॉल्ट रूप से पृष्ठभूमि रंग, टेक्स्ट रंग, या फ़ॉन्ट परिवार जैसे वेब पेज स्टाइल को संशोधित करती है।
• अवयव : यह दूसरी परत “कंटेनर” वर्ग के अंदर उपलब्ध है जो ब्राउज़र के आकार के अनुसार चौड़ाई जोड़ता है। इसके अनुभाग में, उपयोगकर्ता अपने स्वयं के बनाए गए बाह्य घटकों को जोड़ सकता है।
• उपयोगिताओं : यह तीसरी परत है जो लगभग सभी स्टाइलिंग वर्गों जैसे छाया, रंग, जोड़ना, फ्लेक्स और कई अन्य वर्गों को जोड़ती है।

इन निर्देशों को निम्न विंडो में देखा जा सकता है:

चरण 4: सीएसएस बनाएँ
अब, निम्नलिखित आदेश निष्पादित करके Tailwind CLI टूल का उपयोग करके CSS बनाएं। यह सभी टेम्पलेट फाइलों को स्कैन करेगा और 'में सीएसएस का निर्माण करेगा' जिला/आउटपुट.सीएसएस ' फ़ाइल:

यह देखा जा सकता है कि उपरोक्त आदेश सफलतापूर्वक निष्पादित किया गया है। अब, 'प्रोजेक्ट1' की फ़ाइल संरचना इस तरह दिखती है:

चरण 5: एक HTML टेम्प्लेट बनाएं और उसका पथ कॉन्फ़िगर करें
वह HTML टेम्प्लेट बनाएं जिसमें उपयोगकर्ता 'टेलविंड CSS' को एम्बेड करना चाहता है और फिर इसके पथ को 'में कॉन्फ़िगर करें' टेलविंड.कॉन्फिग.जेएस ”। आइए सबसे पहले निम्नलिखित HTML टेम्पलेट पर एक नजर डालते हैं “ index.html ':

उपरोक्त कोड लाइनों में:

• 'सिर' अनुभाग 'का उपयोग करता है' <लिंक> 'निर्मित/संकलित CSS फ़ाइल को लिंक करने के लिए टैग' /dist/output.css 'मौजूदा HTML फ़ाइल के साथ' index.html ”।
• 'निकाय' खंड पहले निर्दिष्ट करता है ' <एच2> ” टैग जो टेलविंड वर्ग का उपयोग करते हुए पहले उपशीर्षक को परिभाषित करता है ” पाठ संरेखित ''केंद्र' पर इसके संरेखण को समायोजित करने के लिए, ' फ़ॉन्ट वजन ” टेक्स्ट को “बोल्ड” करने के लिए, “ पाठ का रंग 'निर्दिष्ट रंग जोड़ने के लिए, और' पृष्ठभूमि का रंग ” क्रमशः दिए गए पृष्ठभूमि रंग को लागू करने के लिए।
• अगला, ' <एच3> ' और यह '

  ” टैग भी अपनी सामग्री को स्टाइल करने के लिए ऊपर चर्चा की गई Tailwind कक्षाओं का उपयोग करते हैं।

HTML टेम्पलेट पथ कॉन्फ़िगर करें
अगला, 'खोलें टेलविंड.कॉन्फिग.जेएस ” और HTML टेम्पलेट फ़ाइल के “सामग्री” खंड में लिंक या पथ जोड़ें, अर्थात, “index.html”:

प्रेस ' सीटीआरएल+एस 'नए परिवर्तनों को सहेजने के लिए।

चरण 6: HTML कोड निष्पादित करें
अंत में, लाइव सर्वर में HTML 'index.html' कोड निष्पादित करें और इसका आउटपुट देखें:

उत्पादन

जैसा कि देखा गया है, आउटपुट टेलविंड सीएसएस की मदद से स्टाइल की गई HTML सामग्री दिखाता है।

निष्कर्ष

Tailwind CSS “ का उपयोग करता है टेलविंड.कॉन्फिग.जेएस बनाए गए HTML टेम्पलेट पथों को कॉन्फ़िगर करने के लिए कॉन्फ़िगरेशन फ़ाइल। यह निर्दिष्ट करता है ' संतुष्ट ” अनुभाग जिसमें सभी HTML टेम्प्लेट का सटीक पथ, Tailwind वर्ग के नाम वाली स्रोत फ़ाइलें और JavaScript घटक शामिल हैं। यह निर्दिष्ट HTML फ़ाइल को स्कैन करता है और फिर अपनी सामग्री में Tailwind CSS लागू करता है। इस पोस्ट में Tailwind CSS में टेम्प्लेट पथों को कॉन्फ़िगर करने की पूरी प्रक्रिया को समझाया गया है।