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

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

अपने Next.js प्रोजेक्ट्स में अद्भुत उपयोगकर्ता इंटरफ़ेस बनाने के लिए Tailwind को इंस्टॉल और उपयोग करना सीखें।

Tailwind CSS को Next.js में इंस्टॉल करें

Tailwind को Next.js एप्लिकेशन में इंस्टॉल करके प्रारंभ करें। प्रक्रिया के समान है एक रिएक्ट ऐप में टेलविंड स्थापित करना, कॉन्फ़िगरेशन प्रक्रिया में थोड़े अंतर के साथ।

पर जाएँ टेलविंड CSS इंस्टालेशन पृष्ठ। इसके बाद पर जाएं

फ्रेमवर्क गाइड अनुभाग और चयन करें अगला.जेएस. इस अनुभाग में वे सभी निर्देश हैं जिनकी आपको अपने Next.js प्रोजेक्ट में Tailwind सेट अप करने के लिए आवश्यकता होती है।

Tailwind by एनपीएम, जावास्क्रिप्ट पैकेज मैनेजर, ये दो टर्मिनल कमांड चलाएँ:

एनपीएम इंस्टॉल -डी टेलविंडसीएसएस पोस्टसीएसएस ऑटोप्रीफिक्सर
एनपीएक्स टेलविंडसीएसएस इनिट -पी

ये कमांड नाम की दो कॉन्फिग फाइल बनाते हैं टेलविंड.कॉन्फिग.जेएस और postcss.config.js रूट प्रोजेक्ट फ़ोल्डर में। ये फ़ाइलें बताती हैं कि TailwindCSS सफलतापूर्वक इंस्टॉल हो गया था. आप टेलविंड सीएलआई के माध्यम से या पोस्टसीएसएस प्लगइन के रूप में टेलविंड सीएसएस भी स्थापित कर सकते हैं।

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

स्थापना के बाद, आपको स्थापना मार्गदर्शिका में प्रदान किए गए टेम्पलेट पथ को अपनी ऐप कॉन्फ़िगरेशन फ़ाइल में कॉन्फ़िगर करना होगा। निम्नलिखित कोड को इसमें जोड़ें टेलविंड.कॉन्फ़िग.जेएस फ़ाइल:

/** @प्रकार {आयात ('टेलविंडसीएसएस')। कॉन्फिग}*/
मापांकनिर्यात = {
 संतुष्ट: [ 
"./app/**/*.{js, ts, jsx, tsx}",
"./pages/**/*.{js, ts, jsx, tsx}",
"./components/**/*.{js, ts, jsx, tsx}",
// या यदि `src` निर्देशिका का उपयोग कर रहे हैं: 
"./src/**/*.{js, ts, jsx, tsx}",
 ],
 थीम: { 
 बढ़ाना: {},
 },
 प्लगइन्स: [],
}

ऐप में टेलविंड डायरेक्टिव जोड़ें

इसके बाद, निम्न Tailwind निर्देशों को अपनी ऐप CSS फ़ाइल में जोड़ें। यह नाम की फाइल है वैश्विक.सीएसएस। आपको global.css फ़ाइल की सामग्री हटा देनी चाहिए और टेलविंड निर्देश जोड़ना चाहिए।

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

बिल्ड प्रक्रिया चलाएँ

अब, टर्मिनल पर, निम्नलिखित कमांड के साथ CLI टूल चलाएँ:

एनपीएम रन देव

यह आदेश कक्षाओं के लिए आपकी टेम्प्लेट फ़ाइलों को स्कैन करता है और आपका CSS बनाता है। यह आपके लिए ब्राउजर देखने के लिए एक पोर्ट खोलेगा।

अब, यदि आप सर्वर पर नेविगेट करते हैं http://localhost: 3000 आप अपना ऐप देखेंगे। आपको सामग्री में थोड़ा बदलाव देखना चाहिए। यह दर्शाता है कि इंस्टॉलेशन प्रक्रिया सफल रही है और Tailwind CSS लाइव है.

प्रोजेक्ट में टेलविंड का उपयोग करें

इसके बाद, चलिए आपके प्रोजेक्ट में कक्षाएं लागू करके Tailwind CSS सुविधाओं का परीक्षण करते हैं। उदाहरण के लिए, आपके पास "Hello Tailwind" टेक्स्ट वाला एक ऐप है। आप इसे हल्के नीले रंग की पृष्ठभूमि के साथ लाल रंग देना चाहते हैं।

एक बनाने के Home.tsx फ़ाइल फिर निम्न कोड जोड़ें:

निर्यातगलती करनासमारोहघर() {
वापस करना (
"बीजी-ब्लू -300">
'टेक्स्ट-रेड-900'>हैलो टेलविंड सीएसएस</h1>
 </body>
 );
} 

अब, जब आप ब्राउज़र पर जाते हैं, तो आप देखेंगे कि टेक्स्ट लाल रंग में बदल गया है, और पृष्ठभूमि नीली है।

आप अपने ऐप के अन्य घटकों को शैलीबद्ध करने के लिए अन्य Tailwind CSS सुविधाओं को एक्सप्लोर कर सकते हैं। सशर्त संशोधक आपको होवर और फ़ोकस जैसी प्रतिक्रियाशील अवस्थाएँ बनाने की अनुमति देते हैं। आप अपने पृष्ठों को उपयोगकर्ता की पसंद के अनुसार डार्क और लाइट मोड में भी अनुकूलित कर सकते हैं।

टेलविंड सीएसएस इस्तेमाल करने के फ़ायदे

2017 में एडम वाथन द्वारा निर्मित, टेलविंड सीएसएस अन्य सीएसएस पुस्तकालयों से कई मायनों में अलग है। इसमें शून्य रन-टाइम है, जिससे यह बहुत तेज़ है। और इनस्टॉल करना आसान है. Tailwind आपके ऐप पर वर्ग नामों के लिए सभी HTML फ़ाइलों और JavaScript घटकों को स्कैन करता है। यह तब तत्वों को डिजाइन करने वाली संबंधित शैलियों को उत्पन्न करता है।

टेलविंड सीएसएस आपको आदिम उपयोगिताओं से जटिल घटकों को डिजाइन करने की अनुमति देता है। आप घटकों में शैलियों का पुन: उपयोग कर सकते हैं और उत्तरदायी UI को शैलीबद्ध करने के लिए संशोधक का उपयोग कर सकते हैं। अपने ब्रांड से मेल खाने वाले ऐप्स को कस्टमाइज़ करने के लिए Tailwind CSS को इंस्टॉल और उपयोग करने का तरीका जानने के लिए यहां दिए गए चरणों का उपयोग करें।