यह पोस्ट टेलविंड सीएसएस में 'आधार शैलियाँ' जोड़ने के सभी संभावित पहलुओं को दर्शाती है।
टेलविंड में 'आधार' शैलियाँ कैसे जोड़ें?
'टेलविंड सीएसएस' संपूर्ण HTML सामग्री या किसी विशिष्ट तत्व में 'आधार' शैलियों को जोड़ने के लिए निम्नलिखित तीन तरीकों के साथ आता है:
- टेलविंड में आधार शैलियाँ जोड़ने के लिए 'सीएसएस' का उपयोग करें।
- टेलविंड में आधार शैलियाँ जोड़ने के लिए 'प्लगइन' का उपयोग करें।
आइए एक-एक करके उनका अन्वेषण करें।
आवश्यक शर्तें
व्यावहारिक कार्यान्वयन पर आगे बढ़ने से पहले, 'लिनक्सहिंट' नामक नव निर्मित परियोजना पर एक नज़र डालें जिसका उपयोग 'आधार शैलियों' को जोड़ने के लिए किया जाता है:
प्रोजेक्ट फ़ाइल संरचना
अब, “index.html” फ़ाइल पर जाएँ और इसके HTML कोड पर एक नज़र डालें:
< एचटीएमएल >< सिर >
< जोड़ना href = '/dist/output.css' रिले = 'शैली पत्रक' >
< / सिर >
< शरीर >
< एच 2 कक्षा = 'अंडरलाइन टेक्स्ट-सेंटर फ़ॉन्ट-बोल्ड टेक्स्ट-गुलाबी-600' > Linuxhint में आपका स्वागत है! < / एच 2 < बीआर >
< h3 कक्षा = 'टेक्स्ट-सेंटर फ़ॉन्ट-बोल्ड टेक्स्ट-नारंगी-600' > ट्यूटोरियल: टेलविंड में आधार शैलियाँ जोड़ना। < / h3 < बीआर >
< / शरीर >
उपरोक्त कोड पंक्तियों में:
उत्पादन
उपरोक्त कोड का आउटपुट यहां दिखाया गया है:
अब, आधार शैलियों को जोड़कर उपरोक्त HTML कोड को अनुकूलित करने के लिए चर्चा की गई विधि का उपयोग करें। आइए टेलविंड 'सीएसएस' पद्धति से शुरुआत करें।
विधि 1: टेलविंड में 'बेस स्टाइल' जोड़ने के लिए सीएसएस का उपयोग करें
विशिष्ट HTML तत्व में आधार शैली जोड़ने का सबसे सरल और आसान तरीका उन्हें प्रोजेक्ट की मुख्य सीएसएस फ़ाइल में जोड़ना है। आइए दिए गए चरणों का पालन करके इस कार्य को व्यावहारिक रूप से करें।
चरण 1: सीएसएस फ़ाइल खोलें
सबसे पहले, मुख्य सीएसएस फ़ाइल खोलें अर्थात, “ स्टाइल.सीएसएस जिसमें अंतर्निहित टेलविंड 'आधार', 'घटक', और 'उपयोगिताएँ' परतें शामिल हैं:
चरण 2: सीएसएस जोड़ें
इसके बाद, ' का उपयोग करके कक्षाएं लागू करके विशिष्ट '
' और '' HTML तत्वों के लिए 'आधार' शैली जोड़ें। @आवेदन करना 'की मदद से' आधार 'परत में निर्देश' @परत 'कीवर्ड. '@लेयर' कीवर्ड निर्दिष्ट 'आधार' परत पर परिभाषित कक्षाएं जोड़ते हैं: @परत आधार {
एच 2 {
@टेक्स्ट-3xl लागू करें;
}
h3 {
@टेक्स्ट-एक्सएल लागू करें;
}
}
एच 2 {
@टेक्स्ट-3xl लागू करें;
}
h3 {
@टेक्स्ट-एक्सएल लागू करें;
}
}
उपरोक्त कोड पंक्तियों में, ' फ़ॉन्ट आकार 'वर्ग को क्रमशः'
' और '' तत्वों को निर्दिष्ट आकार तक बड़ा करने के लिए लागू किया जाता है:
फ़ाइल को सेव (Ctrl + S) करें।
चरण 3: आउटपुट
अब, कोड को लाइव सर्वर में चलाएँ और आउटपुट देखें, इस प्रकार:
यहां, आउटपुट से पता चलता है कि टेलविंड 'फ़ॉन्ट आकार' वर्ग को बेस लेयर में निर्दिष्ट तत्व पर सफलतापूर्वक लागू किया गया है।
टिप्पणी : अन्य सभी टेलविंड सीएसएस कक्षाओं के लिए समान दृष्टिकोण का उपयोग किया जाता है।
विधि 2: टेलविंड में 'बेस स्टाइल' जोड़ने के लिए प्लगइन का उपयोग करें
'आधार' शैलियों को जोड़ने का एक अन्य उपयोगी तरीका 'लिखना' है लगाना ' और ' का उपयोग करें ऐडबेस() ' समारोह। यह फ़ंक्शन नई कक्षाओं को पंजीकृत करने में मदद करता है ' आधार 'परत निर्देश. इस फ़ंक्शन का उपयोग टेलविंड 'tailwind.config.js' फ़ाइल में किया जाता है। आइए इसे व्यावहारिक रूप से करें।
चरण 1: 'ऐडबेस()' फ़ंक्शन को परिभाषित करें
सबसे पहले, “पर जाएँ” टेलविंड.config.js 'कॉन्फ़िगरेशन फ़ाइल बनाएं और प्लगइन से आधार शैलियाँ जोड़ें और' addBase() 'फ़ंक्शन को कॉल करें:
फ़ाइल सहेजें।
चरण 2: आउटपुट
अंत में, दिए गए HTML कोड को चलाएँ और आउटपुट देखें:
जैसा कि देखा गया है, जावास्क्रिप्ट ऑब्जेक्ट के रूप में 'एडबेस ()' फ़ंक्शन में परिभाषित टेलविंड 'फ़ॉन्ट आकार' वर्ग निर्दिष्ट HTML तत्वों पर लागू होता है।
निष्कर्ष
टेलविंड बेस शैलियाँ 'का उपयोग करके आसानी से जोड़ी जा सकती हैं' सीएसएस 'मुख्य सीएसएस फ़ाइल में कक्षाएं और' लगाना ' साथ ' ऐडबेस() कॉन्फ़िगरेशन फ़ाइल में फ़ंक्शन। 'सीएसएस' विधि को सबसे सरल विधि माना जाता है क्योंकि यह केवल 'आधार' परत में आधार शैलियों को परिभाषित करती है और स्वचालित रूप से उन्हें निर्दिष्ट तत्व पर लागू करती है। दूसरी ओर, 'प्लगइन' अनुभाग टेलविंड.config.js ' फ़ाइल को आधार शैलियों को जावास्क्रिप्ट ऑब्जेक्ट के रूप में परिभाषित करने के लिए 'एडबेस ()' फ़ंक्शन की आवश्यकता होती है। इस पोस्ट में टेलविंड सीएसएस में बेस स्टाइल जोड़ने के सभी संभावित पहलुओं का वर्णन किया गया है।