टेलविंड सीएसएस एक उपयोगिता पहला सीएसएस ढांचा है जो डेवलपर्स को सीएसएस फ़ाइल पर स्विच किए बिना कस्टम वेब घटकों को डिजाइन करने की अनुमति देता है। इस ट्यूटोरियल में, आप सीखेंगे कि रिएक्ट में टेलविंड सीएसएस कैसे स्थापित करें और एक साधारण रिएक्ट पेज बनाने के लिए आप इसका उपयोग कैसे कर सकते हैं।

टेलविंड सीएसएस का उपयोग क्यों करें?

पहले से ही बहुत कुछ है सीएसएस फ्रेमवर्क जो डेवलपर्स द्वारा वेब पेजों को डिजाइन करने के तरीके को सरल बनाते हैं। तो आपको Tailwind CSS का उपयोग क्यों करना चाहिए?

CSS फ्रेमवर्क जैसे बूटस्ट्रैप और फाउंडेशन, ओपिनेटेड फ्रेमवर्क हैं, जिसका अर्थ है कि वे डेवलपर्स को पूर्व-परिभाषित घटकों के साथ प्रदान करते हैं जिनकी डिफ़ॉल्ट शैली होती है। यह अनुकूलन और रचनात्मकता दोनों को सीमित करता है, और आप उन वेबसाइटों के साथ समाप्त होते हैं जो सामान्य दिखती हैं।

टेलविंड सीएसएसहालांकि, एक उपयोगिता-प्रथम ढांचा है जो आपको गतिशील घटकों को बनाने के लिए रचनात्मक नियंत्रण प्रदान करता है। और बूटस्ट्रैप के विपरीत, आप अपनी इच्छानुसार डिज़ाइन को आसानी से कस्टमाइज़ कर सकते हैं।

टेलविंड सीएसएस का उपयोग करने का एक अन्य लाभ यह है कि आप एक छोटे सीएसएस बंडल आकार के साथ समाप्त होते हैं क्योंकि यह सभी को हटा देता है निर्माण प्रक्रिया के दौरान अप्रयुक्त सीएसएस (जो बूटस्ट्रैप से अलग है, क्योंकि इसमें सभी सीएसएस फाइलें शामिल हैं निर्माण)।

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

टेलविंड सीएसएस का उपयोग करने के नुकसान

अनुभवी डेवलपर्स के लिए भी टेलविंड सीएसएस में सीखने की अवस्था तेज है। उपयोगिता वर्गों का पूरी तरह से उपयोग करने का तरीका सीखने में कुछ समय लगता है, और आपको अक्सर दस्तावेज़ीकरण को संदर्भित करने की आवश्यकता हो सकती है। हालांकि, कक्षाओं से परिचित होने के बाद, आप इसे सादे सीएसएस की तुलना में आसान और तेज पाएंगे।

अधिकांश डेवलपर्स चिंताओं को अलग करने के सिद्धांत का पालन करना पसंद करते हैं जैसे कि सीएसएस और एचटीएमएल फाइलें अलग-अलग फाइलों में लिखी जाती हैं। Tailwind CSS के साथ, आप CSS को सीधे HTML मार्कअप में लिखते हैं—कुछ के लिए एक खामी।

इन कमियों के बावजूद, Tailwind CSS एक ऐसा ढांचा है जिस पर आपको गंभीरता से विचार करना चाहिए कि क्या आप पहले से ही CSS के साथ सहज हैं और तेजी से डिजाइन बनाना चाहते हैं।

प्रारंभ करना: एक प्रतिक्रिया परियोजना बनाएँ

मचान करने के लिए टर्मिनल में निम्न कमांड चलाएँ a प्रतिक्रिया आवेदन का उपयोग क्रिएट-रिएक्शन-ऐप.

एनपीएक्स क्रिएट-रिएक्शन-ऐप रिएक्ट-टेलविंड

क्रिएट-रिएक्शन-ऐप वेबपैक, बेबेल या लिंटर्स जैसे बिल्ड टूल को कॉन्फ़िगर किए बिना रिएक्ट ऐप बनाने का एक आसान तरीका प्रदान करता है। इसका मतलब है कि आप मिनटों के भीतर काम करने वाले रिएक्ट वातावरण के साथ समाप्त हो जाते हैं।

उपरोक्त आदेश नाम का एक नया फ़ोल्डर बनाता है रिएक्ट-टेलविंड. फ़ोल्डर में नेविगेट करें और अपने पसंदीदा टेक्स्ट एडिटर का उपयोग करके इसे खोलें।

सीडी प्रतिक्रिया-टेलविंड

इसके बाद, टेलविंड सीएसएस इंस्टॉल करें और इसे रिएक्ट एप्लिकेशन के साथ काम करने के लिए कॉन्फ़िगर करें।

प्रतिक्रिया में टेलविंड सीएसएस का प्रयोग करें

इस आदेश के साथ टेलविंड सीएसएस और उसकी निर्भरताएं स्थापित करें:

एनपीएम टेलविंडसीएसएस पोस्टसीएसएस ऑटोप्रीफिक्सर स्थापित करें

पोस्टसीएसएस CSS को अधिकांश ब्राउज़रों के साथ संगत बनाने के लिए JavaScript प्लगइन्स का उपयोग करता है। यह उस ब्राउज़र की जांच करता है जिसमें एप्लिकेशन चल रहा है और आपके सीएसएस को निर्बाध रूप से काम करने के लिए आवश्यक पॉलीफिल निर्धारित करता है। Autoprefixer एक PostCSS प्लगइन है जो से मूल्यों का उपयोग करता है caniuse.com CSS नियमों में विक्रेता उपसर्गों को स्वचालित रूप से जोड़ने के लिए।

टेलविंड सीएसएस को इनिशियलाइज़ करें

चलाएँ टेलविंड इनिट टेलविंड सीएसएस डिफ़ॉल्ट कॉन्फ़िगरेशन फ़ाइलें जनरेट करने के लिए कमांड।

एनपीएक्स टेलविंडसीएसएस init

यह बनाता है tailwind.config.js रूट फ़ोल्डर में जो टेलविंड की सभी कॉन्फ़िगरेशन फ़ाइलों को संग्रहीत करता है और इसमें निम्नलिखित शामिल हैं:

मॉड्यूल.एक्सपोर्ट = {
 विषय: [],
 विषय: {
 विस्तार: {},
 },
 प्लगइन्स: [],
}

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

आपको Tailwind CSS को यह बताने की ज़रूरत है कि कौन सी CSS कक्षाओं का उपयोग किया जा रहा है, यह देखने के लिए उसे फाइलों की जाँच करनी चाहिए। यह टेलविंड को अप्रयुक्त कक्षाओं को पहचानने और हटाने की अनुमति देता है और इसलिए उत्पन्न सीएसएस के आकार को कम करता है।

में tailwind.config.js, सामग्री कुंजी के अंतर्गत टेम्पलेट पथ जोड़ें।

मॉड्यूल.एक्सपोर्ट = {
 विषय: [
 "./src/**/*.{js, jsx, ts, tsx}",
 ],
 विषय: {
 विस्तार: {},
 },
 प्लगइन्स: [],
}

प्रतिक्रिया में टेलविंड सीएसएस इंजेक्ट करें

अगला कदम है टेलविंड सीएसएस का उपयोग करके एप्लिकेशन में शामिल करना @tailwind निर्देश।

में सब कुछ हटाएं index.css और आधार शैलियों, घटकों और उपयोगिताओं को आयात करने के लिए निम्नलिखित जोड़ें।

@tailwind बेस;
@tailwind घटक;
@tailwind उपयोगिताओं;

अंत में, सुनिश्चित करें index.css में आयात किया जाता है index.js और टेलविंड सीएसएस उपयोग के लिए तैयार हो जाएगा।

प्रतिक्रिया घटक को स्टाइल करने के लिए टेलविंड सीएसएस का उपयोग करना

आप नीचे सरल वेब पेज बनाएंगे और टेलविंड की उपयोगिता कक्षाओं का उपयोग करके इसे स्टाइल करेंगे।

इस पृष्ठ में दो मुख्य खंड हैं: a नेविगेशन बार, और नायक अनुभाग (जिसमें एक शीर्षक और एक बटन होता है)।

यह समझाने के लिए कि कैसे Tailwind CSS CSS को लिखना आसान बनाता है, सादे CSS और Tailwind CSS का उपयोग करके वेब पेज को स्टाइल करने का प्रयास करें।

इसे संशोधित करके प्रारंभ करें ऐप.जेएस में एसआरसी अनावश्यक कोड को हटाने के लिए फ़ोल्डर।

आयात './App.css'
फ़ंक्शन ऐप () {
 वापसी (



 );
}
निर्यात डिफ़ॉल्ट ऐप;

इसके बाद, वेब पेज की सामग्री को इसमें जोड़ें ऐप.जेएस.

आयात "./App.css";
फ़ंक्शन ऐप () {
 वापसी (







 टेलविंड सीएसएस रिएक्ट घटकों को स्टाइल करना आसान बनाता है!



शुरू हो जाओ






 );
}

सादे CSS का उपयोग करने के लिए, CSS को इसमें जोड़ें ऐप.सीएसएस.

नौसेना {
 प्रदर्शन: फ्लेक्स;
 औचित्य-सामग्री: अंतरिक्ष-बीच;
 पैडिंग: 16px 36px;
 रंग: #000;
 बॉक्स-छाया: 0px 2px 5px 0px आरजीबीए (168, 168, 168, 0.75);
}
।प्रतीक चिन्ह {
 फ़ॉन्ट-आकार: 18px;
 फोंट की मोटाई: बोल्ड;
}
उल {
 सूची-शैली: कोई नहीं;
 प्रदर्शन: इनलाइन-फ्लेक्स;
}
उल ली {
 मार्जिन-बाएं: 16px;
 कर्सर: सूचक;
}
।नायक {
 प्रदर्शन: फ्लेक्स;
 फ्लेक्स-दिशा: स्तंभ;
 संरेखित-आइटम: केंद्र;
 मार्जिन-टॉप: 64px;
}
एच1 {
 फ़ॉन्ट-आकार: 36px;
 पाठ-संरेखण: केंद्र;
}
.बीटीएन {
 पृष्ठभूमि-रंग: #000000;
 रंग: #fff;
 पैडिंग: 10px;
 चौड़ाई: फिट-सामग्री;
 मार्जिन-टॉप: 36px;
}

टेलविंड सीएसएस के साथ, आपको प्रत्येक वर्ग के लिए सीएसएस नियम लिखने की आवश्यकता नहीं है। इसके बजाय, आप उपयोगिता वर्गों का उपयोग करते हैं। ये एक सीएसएस संपत्ति के दायरे में वर्ग हैं। उदाहरण के लिए, यदि आप एक काले रंग की पृष्ठभूमि और सफेद टेक्स्ट रंग के साथ एक बटन बनाना चाहते हैं, तो आपको इसका उपयोग करने की आवश्यकता है बीजी-ब्लैक तथा टेक्स्ट-सफ़ेद उपयोगिता वर्ग।

ऐप.जेएस इस तरह दिखना चाहिए।

फ़ंक्शन ऐप () {
 वापसी (







 टेलविंड सीएसएस रिएक्ट घटकों को स्टाइल करना आसान बनाता है!




 शुरू हो जाओ







 );
}

आपको आयात करने की आवश्यकता नहीं है ऐप.सीएसएस चूंकि टेलविंड सीएसएस द्वारा जेनरेट की गई शैलियों को में संग्रहीत किया जाता है index.css जिसे आपने आयात किया था index.js पूर्व।

सादे सीएसएस की तुलना में, इस दृष्टिकोण के परिणामस्वरूप कम कोड होता है जिसे समझना आसान होता है।

टेलविंड सीएसएस के साथ स्टाइल में कोड

इस लेख में, आपने टेलविंड सीएसएस, इसकी ताकत, नुकसान और आप रिएक्ट अनुप्रयोगों में इसकी उपयोगिता कक्षाओं का उपयोग कैसे कर सकते हैं, के बारे में सीखा। कक्षाओं के अलावा, टेलविंड सीएसएस अन्य अतिरिक्त सुविधाएँ भी प्रदान करता है जिसमें उत्तरदायी लेआउट और पुन: प्रयोज्य घटकों को बनाने की क्षमता शामिल है।

लेकिन, जैसा कि हमने पहले उल्लेख किया है, टेलविंड बाजार पर एकमात्र सीएसएस ढांचे से दूर है। आप अपनी अगली परियोजना के लिए किसका उपयोग करेंगे?

टेलविंड सीएसएस बनाम। बूटस्ट्रैप: कौन सा बेहतर ढांचा है?

CSS फ्रेमवर्क चुनते समय यह महत्वपूर्ण है कि वह आपकी आवश्यकताओं को पूरा करे।

आगे पढ़िए

लेखक के बारे में