Tailwind CSS को अपने Ruby on Rails प्रोजेक्ट में आसानी से एकीकृत करें

सभी वेबसाइटों के लिए कैस्केडिंग स्टाइल शीट्स (CSS) के महत्व को बढ़ा-चढ़ाकर बताना मुश्किल है। चूंकि पहली CSS मानक 1996 के अंत में प्रकाशित हुए थे, हम सुविधाओं और इकोसिस्टम के संबंध में काफी आगे आ गए हैं।

कई फ्रेमवर्क दिखाई दिए और लोकप्रिय साबित हुए, सबसे हालिया में से एक Tailwind CSS है।

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

आइए शुरू करें!

Tailwind CSS: एक यूटिलिटी-फर्स्ट दृष्टिकोण

अधिकांश CSS फ्रेमवर्क (Foundation, Bootstrap, या Bulma, उदाहरण के लिए) बटन और फॉर्म फील्ड जैसे रेडी-टू-यूज़ घटक प्रदान करते हैं, ताकि आप एक इंटरफ़ेस को आकार देने के लिए ब्लॉक्स को जल्दी से असेंबल कर सकें।

आमतौर पर, Bootstrap के साथ एक बटन जोड़ना इस तरह दिखता है:

इस उदाहरण में, btn और btn-primary क्लासेस लागू करके एक साधारण बटन परिभाषित और स्टाइल किया जाता है। btn-primary हमारे उपयोग के मामले के लिए सही रंग सेट करता है। फिर भी, वह इंटरफ़ेस हमारी जरूरतों को पूरा नहीं कर सकता, इसलिए हम हर घटक को अनुकूलित करने के लिए एक कस्टम CSS स्टाइलशीट जोड़ते हैं:

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

"यूटिलिटी-फर्स्ट" का अर्थ है कि Tailwind परमाणु, एकल-उद्देश्य क्लासेस प्रदान करता है जिन्हें आप जटिल डिज़ाइन बनाने के लिए जोड़ सकते हैं।

आइए Tailwind और Bootstrap की तुलना करने के लिए कुछ कोड देखें। पहले, यहां बताया गया है कि Tailwind हमें एक साधारण बटन को कैसे स्टाइल करने देता है:

बटन एलिमेंट क्लासेस की एक श्रृंखला है जिसे कॉन्फिगर करना है:

• बैकग्राउंड रंग bg-blue-500: जबकि 'blue' एक पूर्व-चयनित रंग है, हम संख्या के साथ रंग की छाया सेट कर सकते हैं। संख्या जितनी अधिक होगी, रंग उतना ही गहरा होगा।
• होवर पर बैकग्राउंड रंग: hover:bg-blue-600।
• टेक्स्ट रंग text-white: यहां संख्या की आवश्यकता नहीं है, क्योंकि यह सफेद है; यदि आप कोई संख्या निर्दिष्ट नहीं करते हैं तो हमेशा एक डिफ़ॉल्ट छाया होती है, जैसे text-red के साथ।
• वर्टिकल पैडिंग py-2: 'p' पैडिंग है, 'y' वर्टिकल अक्ष के लिए है, '2' स्पेसिंग मान है, पिक्सल में नहीं बल्कि Tailwind में परिभाषित एक पैमाने में।
• हॉरिजॉन्टल पैडिंग px-4: ऊपर जैसा ही, 'x' हॉरिजॉन्टल अक्ष के लिए।
• कोने गोल करना: rounded।

यह Bootstrap उदाहरण की तुलना में अधिक वर्बोज़ दिखता है, लेकिन केवल क्लासेस जोड़कर, हम शैली के प्रत्येक भाग को समायोजित कर सकते हैं। हमें एक कस्टम CSS क्लास बनाने की आवश्यकता नहीं है।

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

स्केल पर एक शब्द

CSS स्पेसिंग (जैसे मार्जिन और पैडिंग) के मामले में शक्तिशाली है, और आप पिक्सल और रेम्स (रूट-ईएम, रूट एलिमेंट के आकार के सापेक्ष एक आकार) के साथ काम कर सकते हैं। यह कठिन होता है, हालांकि। Tailwind अपने स्वयं के स्पेसिंग स्केल के साथ आता है जो जटिलता को छुपाता है जबकि आनुपातिकता के साथ भी मदद करता है।

डिफ़ॉल्ट रूप से, Tailwind 0 और 96 के बीच मान प्रदान करता है, प्रत्येक चरण दूसरों के अनुपात में। उदाहरण के लिए, मान 16 में 8 की तुलना में दोगुना स्पेसिंग है। इसके लिए धन्यवाद, हमें रेम्स या पिक्सल के साथ काम करने के लिए गणित करने की आवश्यकता नहीं है। हम अपने पसंदीदा मान परिभाषित कर सकते हैं और उन्हें अपने डिज़ाइन में पुन: उपयोग कर सकते हैं।

Tailwind CSS के दस्तावेज़ीकरण में स्पेसिंग के बारे में और पढ़ें।

Ruby on Rails वातावरण में Tailwind सेट अप करना

Ruby on Rails 7.x सीधे अपने एप्लिकेशन जनरेटर में Tailwind का समर्थन करता है।

हम इस आलेख में अनावश्यक जटिलता जोड़ने से बचने के लिए टेस्ट कॉन्फिगरेशन (-T) को छोड़ देंगे।

Tailwind में एक साफ सुविधा है जो आपके एप्लिकेशन के लिए आवश्यक CSS फाइल जनरेट करता है। अन्य फ्रेमवर्क आपको एक संपूर्ण CSS फाइल शामिल करने की आवश्यकता होती है जो एक फ्रेमवर्क को परिभाषित करती है (यहां तक कि उन टुकड़ों को भी जिनका आप उपयोग नहीं करते)। इसके विपरीत, Tailwind आपके प्रोजेक्ट को स्कैन करेगा और एक CSS फाइल जनरेट करेगा जिसमें केवल वही क्लासेस होंगी जिनकी आपके प्रोजेक्ट को आवश्यकता है।

आपको ऐसा करने के लिए एक छोटी यूटिलिटी चलाने की आवश्यकता है। डेवलपमेंट मोड में, आप एक वॉचर डेमॉन चला सकते हैं जो आपके काम करते ही चीजों को अद्यतन रखेगा: bin/rails tailwindcss:watch।

आप वॉचर डेमॉन को अपने Procfile में भी जोड़ सकते हैं, फिर foreman या overmind का उपयोग करके web और css प्रक्रियाओं को शुरू कर सकते हैं:

आइए अब इसे एक साधारण लैंडिंग पेज के भीतर उपयोग करें:

हम तब https://localhost:3000/landing/index पर जा सकते हैं।

हमारे लैंडिंग पेज को विच्छेदित करना

हर लैंडिंग पेज को एक शीर्षक की आवश्यकता होती है। जनरेटर काम करता है क्योंकि हमने अपने एप्लिकेशन को अपने CSS फ्रेमवर्क के रूप में Tailwind का उपयोग करने के लिए कॉन्फिगर किया है।

हमें यहां कुछ ऐसा मिलता है जो मानक HTML जैसा दिखता है। हमारे पास h1 टैग के लिए केवल दो क्लासेस हैं:

• font-bold: फ़ॉन्ट वजन को नियंत्रित करने के लिए।
• text-4xl: फ़ॉन्ट आकार को नियंत्रित करने के लिए।

यदि हम text-4xl को text-xl में बदलते हैं और पेज को रीलोड करते हैं, तो नई शैली स्वचालित रूप से लागू हो जाएगी। उस टर्मिनल को देखें जहां Foreman चल रहा है, आप देखेंगे कि Tailwind ने पृष्ठभूमि में फिर से एक स्टाइलशीट जनरेट की है। Tailwind को Ruby on Rails एप्लिकेशन में एकीकृत करना कितना सरल है (यह tailwindcss-rails जेम पर निर्भर करता है)।

Ruby on Rails के लिए Tailwind कॉन्फिगर करना

आप config/tailwind.config.js फाइल को संपादित करके Tailwind की सेटिंग्स को समायोजित कर सकते हैं (उदाहरण के लिए, अतिरिक्त रंग जोड़ने के लिए, उपयोग करने के लिए फ़ॉन्ट निर्दिष्ट करने के लिए, स्पेसिंग समायोजित करने के लिए, आदि)।

उदाहरण के लिए, हम अपने बैकग्राउंड और टेक्स्ट के लिए "कॉपर" रंग जोड़ सकते हैं:

ध्यान दें कि शेड्स उपयोगी हैं लेकिन नामित भी किए जा सकते हैं। यदि हमें केवल तीन शेड्स की आवश्यकता है, उदाहरण के लिए, हम अपने व्यूज में संख्याओं के बजाय 'light', 'medium', और 'dark' का उपयोग कर सकते हैं।

हम तब शेड्स को अपने शीर्षक में उपयोग कर सकते हैं:

आप इसके बारे में विवरण tailwindcss-rails जेम के README में और Tailwind CSS दस्तावेज़ीकरण में भी पा सकते हैं।

एसेट पाइपलाइन

हमने देखा है कि bin/rails tailwindcss:watch स्थानीय डेवलपमेंट मोड में हमारे स्टाइलशीट्स को अद्यतन रखता है। यदि हमें स्टाइलशीट्स को केवल एक बार बनाने की आवश्यकता है, तो हम इसके बजाय bin/rails tailwindcss:build का उपयोग कर सकते हैं।

प्रोडक्शन उपयोग के लिए, आप bin/rails assets:precompile पर भरोसा कर सकते हैं जो सीधे bin/rails tailwindcss:build को कॉल करता है।

Ruby on Rails एप्लिकेशन के लिए एसेट पाइपलाइन के बारे में और जानें।

कार्रवाई में Rails के लिए Tailwind

आइए कुछ व्यूज में Tailwind के कुछ व्यावहारिक उपयोग देखें: एक फॉर्म और एक रिस्पॉन्सिव नेविगेशन बार।

एक सरल फॉर्म

Ruby on Rails जनरेटर का उपयोग करके, हम एक user संसाधन बनाते हैं:

हम तब users_controller.rb फाइल को बदल सकते हैं और फॉर्म के लिए एक व्यू बना सकते हैं।

हम प्रत्येक टुकड़े को व्यक्तिगत रूप से स्टाइल करते हैं, टेक्स्ट रंग, बैकग्राउंड रंग, बॉर्डर, पैडिंग, मार्जिन, आदि को समायोजित करते हैं। यहां मानक Tailwind से परे कुछ भी नहीं है, फिर भी हम फॉर्म को अपनी आवश्यकताओं के अनुरूप अनुकूलित करते हैं।

एक रिस्पॉन्सिव नेविगेशन बार

हम ब्राउज़र की न्यूनतम चौड़ाई के आधार पर Tailwind में किसी भी यूटिलिटी क्लास का उपयोग करके सशर्त ब्रेकपॉइंट्स जोड़ सकते हैं। उदाहरण के लिए, निम्नलिखित शीर्षक विंडो आकार के आधार पर रंग बदल जाएगा:

डिफ़ॉल्ट रूप से, रंग ग्रे का एक गहरा शेड है। जब ब्राउज़र विंडो की चौड़ाई 640px और 1024px के बीच होती है, तो यह टील का एक शेड है। यदि विंडो की चौड़ाई 1024px से ऊपर है, तो यह बैंगनी का एक शेड है।

चूंकि Tailwind कॉलम को भी संभाल सकता है, यहां एक उदाहरण है जो दिखाता है कि विंडो आकार के आधार पर किसी एलिमेंट की कॉलम चौड़ाई कैसे बदल सकती है:

इस मामले में लेबल "State" दो या तीन कॉलम तक फैला हुआ है।

यहां, Tailwind के ग्रिड लेआउट यूटिलिटीज का उपयोग करके, हम एक ग्रिड को परिभाषित करते हैं जो:

• डिफ़ॉल्ट रूप से एक कॉलम चौड़ा (grid-cols-1)
• 640px चौड़ाई से ऊपर छह कॉलम चौड़ा
• 768px चौड़ाई से ऊपर आठ कॉलम चौड़ा

ब्रेकपॉइंट्स और उनकी चौड़ाई:

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

जैसा कि हमने देखा, Tailwind पेज डिज़ाइन और घटकों की स्टाइलिंग को सरल बनाता है।

Tailwind बनाम अन्य फ्रेमवर्क

अब जब हम समझते हैं कि Tailwind का उपयोग कैसे किया जा सकता है, तो आइए अन्य फ्रेमवर्क के साथ इसके प्रमुख अंतरों की समीक्षा करें:

• यूटिलिटी-आधारित: हम प्रत्येक तत्व की शैली को विशिष्ट CSS क्लासेस का उपयोग करके लिखते हैं, प्रत्येक शैली के विभिन्न भागों पर ध्यान केंद्रित करता है।
• जो हमें चाहिए वह प्राप्त करें: हमें केवल अपनी वेबसाइट को शिप करने के लिए आवश्यक भाग मिलते हैं, जिससे लोड समय तेज होता है; जो बिल्ड समय को अनुकूलित करता है।
• विस्तार योग्य: हम एक साधारण कॉन्फिगरेशन फाइल के माध्यम से TailwindCSS के डिफ़ॉल्ट को विस्तारित या अनुकूलित कर सकते हैं।
• रंगों की आसान छायांकन: उदाहरण के लिए, होवर स्थितियों को संभालने के लिए रंग के हल्के या गहरे शेड्स बनाने का तरीका निकालने की कोई आवश्यकता नहीं है।
• सरल स्पेसिंग: छिपे हुए और आनुपातिक स्केल स्पेसिंग को सरल बनाते हैं।
• कम कस्टम CSS: चूंकि हम तत्वों को स्टाइल करने के लिए केवल क्लासेस असेंबल करते हैं, हम कस्टम CSS पर कम भरोसा करते हैं और HTML फाइलों और स्निपेट्स का उपयोग करके स्टाइल्स (पूर्ण थीम्स सहित) साझा कर सकते हैं।
• Ruby on Rails अनुकूल: Tailwind जेम के लिए धन्यवाद, सब कुछ लेआउट्स और एसेट्स पाइपलाइन में एकीकृत है।

समापन

जैसा कि हमने देखा, Tailwind का यूटिलिटी-फर्स्ट दृष्टिकोण Ruby on Rails के लिए एक बढ़िया फिट है। हमें Tailwind को हमारी आवश्यकताओं के अनुरूप बनाने के लिए जटिल कस्टम कॉन्फिगरेशन या अतिरिक्त कस्टम CSS जोड़ने में समय बिताने की आवश्यकता नहीं है। जैसे ही हम अपने व्यूज और पार्शियल की कल्पना करते हैं, हम उन्हें आकार और स्टाइल करने के लिए Tailwind यूटिलिटी क्लासेस का उपयोग कर सकते हैं।

यदि आप अधिक सीखना चाहते हैं, तो आप Tailwind के जीवंत समुदाय, और TailwindUI जैसे उत्पादों (Tailwind के रचनाकारों से) के लिए कई रेडी-टू-यूज़ टेम्पलेट्स और घटकों तक पहुंच सकते हैं।

हैप्पी कोडिंग!

P.S. यदि आप Ruby Magic पोस्ट पढ़ना चाहते हैं जैसे ही वे प्रेस से निकलते हैं, तो हमारे Ruby Magic न्यूज़लेटर की सदस्यता लें और कभी भी एक भी पोस्ट मिस न करें!

Thomas Riboulet

हमारे अतिथि लेखक Thomas फ्रांस में स्थित एक कंसल्टेंट बैकएंड और क्लाउड इन्फ्रास्ट्रक्चर इंजीनियर हैं। 13 से अधिक वर्षों से, उन्होंने स्टार्टअप्स और कंपनियों के साथ उनकी टीमों, उत्पादों, और इन्फ्रास्ट्रक्चर को स्केल करने के लिए काम किया है। उन्हें फ्रांस की GNU/Linux मैगज़ीन में और उनके ब्लॉग पर कई बार प्रकाशित किया गया है।

Thomas Riboulet के सभी आलेख