टेलविंड सीएसएस:एक उपयोगिता-प्रथम दृष्टिकोण
<पी> अधिकांश सीएसएस फ्रेमवर्क (फाउंडेशन, बूटस्ट्रैप, या बुलमा, उदाहरण के लिए) बटन और फॉर्म फ़ील्ड जैसे उपयोग के लिए तैयार घटक प्रदान करते हैं, ताकि आप इंटरफ़ेस को आकार देने के लिए ब्लॉक को जल्दी से इकट्ठा कर सकें। <पी> आमतौर पर, बूटस्ट्रैप के साथ एक बटन जोड़ना इस तरह दिखता है: <पी> इस उदाहरण में,btn लागू करके एक साधारण बटन को परिभाषित और स्टाइल किया गया है और btn-primary कक्षाएं. btn-primary हमारे उपयोग के मामले के लिए सही रंग सेट करता है। फिर भी, वह इंटरफ़ेस हमारी आवश्यकताओं के अनुरूप नहीं हो सकता है, इसलिए हम प्रत्येक घटक को अनुकूलित करने के लिए एक कस्टम सीएसएस स्टाइलशीट जोड़ते हैं: <पी> टेलविंड एक "उपयोगिता-प्रथम" अवधारणा है। बटन जैसे उपयोग के लिए तैयार घटक प्रदान करने के बजाय, इसमें निम्न-स्तरीय उपयोगिता वर्ग हैं जिन्हें आप कस्टम डिज़ाइन बनाने के लिए बना सकते हैं। इस प्रकार, यह स्टाइलिंग के लिए अधिक कार्यात्मक दृष्टिकोण को प्रोत्साहित करता है, जहां आप सीधे अपने HTML में पूर्व-निर्धारित कक्षाएं लागू करते हैं। इसका उद्देश्य कस्टम सीएसएस की आवश्यकता को कम करना और उपयोगिता वर्गों की बाधाओं के माध्यम से डिजाइन स्थिरता को बढ़ावा देना है। <पी> "उपयोगिता-प्रथम" का अर्थ है कि टेलविंड परमाणु, एकल-उद्देश्यीय कक्षाएं प्रदान करता है जिन्हें आप जटिल डिजाइन बनाने के लिए जोड़ सकते हैं। <पी> आइए टेलविंड और बूटस्ट्रैप की तुलना करने के लिए कुछ कोड पर एक नज़र डालें। सबसे पहले, यहां बताया गया है कि टेलविंड हमें एक साधारण बटन को कैसे स्टाइल करने देता है: <पी> कॉन्फ़िगर करने के लिए बटन तत्व वर्गों की एक श्रृंखला है: - पृष्ठभूमि रंग
bg-blue-500: जबकि 'नीला' एक पूर्व-चयनित रंग है, हम संख्या के साथ रंग शेड सेट कर सकते हैं। संख्या जितनी अधिक होगी, रंग उतना ही गहरा होगा। - होवर पर पृष्ठभूमि का रंग:
hover:bg-blue-600. - पाठ का रंग
text-white: यहां किसी संख्या की आवश्यकता नहीं है, क्योंकि यह सफ़ेद है; यदि आप कोई संख्या निर्दिष्ट नहीं करते हैं, जैसे कि टेक्स्ट-रेड के साथ, तो हमेशा एक डिफ़ॉल्ट शेड होता है। - वर्टिकल पैडिंग
py-2: 'पी' पैडिंग है, 'वाई' ऊर्ध्वाधर अक्ष के लिए है, '2' रिक्ति मान है, पिक्सेल में नहीं बल्कि टेलविंड में परिभाषित एक स्केल है। - क्षैतिज पैडिंग
px-4: ऊपर के समान, क्षैतिज अक्ष के लिए 'x' के साथ। - कोनों को गोल करना:
rounded.
तराजू पर एक शब्द
<पी> जब स्पेसिंग (जैसे मार्जिन और पैडिंग) की बात आती है तो सीएसएस शक्तिशाली है, और आप पिक्सल और रेम्स (रूट-एम, रूट तत्व के आकार के सापेक्ष एक आकार) के साथ काम कर सकते हैं। हालाँकि, यह कठिन होता है। टेलविंड अपने स्वयं के रिक्ति पैमाने के साथ आता है जो जटिलता को छुपाता है और आनुपातिकता में भी मदद करता है। <पी> डिफ़ॉल्ट रूप से, टेलविंड 0 और 96 के बीच मान प्रदान करता है, जिसमें प्रत्येक चरण दूसरों के समानुपाती होता है। उदाहरण के लिए, मान16 8 से दोगुनी रिक्ति है . इसके लिए धन्यवाद, हमें रेम्स या पिक्सल के साथ काम करने के लिए गणित करने की ज़रूरत नहीं है। हम अपने पसंदीदा मूल्यों को परिभाषित कर सकते हैं और अपने पूरे डिज़ाइन में उनका पुन:उपयोग कर सकते हैं। <पी> टेलविंड सीएसएस के दस्तावेज़ में रिक्ति के बारे में और पढ़ें। रूबी ऑन रेल्स परिवेश में टेलविंड स्थापित करना
<पी> रूबी ऑन रेल्स 7.x सीधे अपने एप्लिकेशन जनरेटर में टेलविंड का समर्थन करता है। <पी> इस आलेख में अनावश्यक जटिलता जोड़ने से बचने के लिए हम परीक्षण कॉन्फ़िगरेशन (-T) को छोड़ देंगे। <पी> टेलविंड में एक साफ-सुथरी सुविधा है जो आपके एप्लिकेशन के लिए आवश्यक सीएसएस फ़ाइल उत्पन्न करती है। अन्य फ़्रेमवर्क के लिए आपको एक फ़्रेमवर्क को परिभाषित करने वाली संपूर्ण सीएसएस फ़ाइल शामिल करने की आवश्यकता होती है (यहां तक कि वे टुकड़े भी जिनका आप उपयोग नहीं करते हैं)। इसके विपरीत, टेलविंड आपके प्रोजेक्ट को स्कैन करेगा और एक सीएसएस फ़ाइल तैयार करेगा जिसमें केवल वे कक्षाएं होंगी जिनकी आपके प्रोजेक्ट को आवश्यकता है। <पी> ऐसा करने के लिए आपको थोड़ी उपयोगिता चलाने की आवश्यकता है। विकास मोड में, आप एक वॉचर डेमॉन चला सकते हैं जो आपके काम करते समय चीजों को अपडेट रखेगा:bin/rails tailwindcss:watch . <पी> आप अपने Procfile में वॉचर डेमॉन भी जोड़ सकते हैं , फिर foreman का उपयोग करें या overmind web प्रारंभ करने के लिए और css प्रक्रियाएं: <पी> आइए अब इसे एक साधारण लैंडिंग पृष्ठ के भीतर उपयोग करें: <पी> फिर हम http://localhost:3000/landing/index. पर जा सकते हैं हमारे लैंडिंग पृष्ठ का विच्छेदन
<पी> प्रत्येक लैंडिंग पृष्ठ को एक शीर्षक की आवश्यकता होती है। जनरेटर तब से काम करता है जब से हमने अपने एप्लिकेशन को टेलविंड को सीएसएस फ्रेमवर्क के रूप में उपयोग करने के लिए कॉन्फ़िगर किया है। <पी> हमें यहां कुछ ऐसा मिलता है जो मानक HTML जैसा दिखता है। हमारे पास h1 टैग के लिए केवल दो वर्ग हैं:font-bold:फ़ॉन्ट भार को नियंत्रित करने के लिए।text-4xl:फ़ॉन्ट आकार को नियंत्रित करने के लिए।
text-4xl बदलते हैं text-xl पर और पृष्ठ को पुनः लोड करें, नई शैली स्वचालित रूप से लागू हो जाएगी। जिस टर्मिनल पर फोरमैन चल रहा है, उसे देखते हुए, आप देखेंगे कि टेलविंड ने पृष्ठभूमि में फिर से एक स्टाइलशीट तैयार की है। टेलविंड को रूबी ऑन रेल्स एप्लिकेशन में एकीकृत करना कितना सरल है (यह टेलविंडसीएसएस-रेल्स रत्न पर निर्भर करता है)। रूबी ऑन रेल्स के लिए टेलविंड को कॉन्फ़िगर करना
<पी> आपconfig/tailwind.config.js को संपादित कर सकते हैं टेलविंड की सेटिंग्स को समायोजित करने के लिए फ़ाइल करें (उदाहरण के लिए, अतिरिक्त रंग जोड़ने के लिए, उपयोग करने के लिए एक फ़ॉन्ट निर्दिष्ट करें, रिक्ति समायोजित करें, आदि)। <पी> उदाहरण के लिए, हम अपनी पृष्ठभूमि और पाठ में "तांबा" रंग जोड़ सकते हैं: <पी> ध्यान दें कि शेड्स मददगार हैं लेकिन इसके बजाय उन्हें नाम दिया जा सकता है। उदाहरण के लिए, यदि हमें केवल तीन शेड्स की आवश्यकता है, तो हम अपने विचारों में संख्याओं के बजाय 'लाइट', 'मीडियम' और 'डार्क' का उपयोग कर सकते हैं। <पी> फिर हम अपने शीर्षक में शेड्स का उपयोग कर सकते हैं: <पी> आप इसके बारे में टेलविंडसीएसएस-रेल्स जेम के रीडमी और टेलविंड सीएसएस दस्तावेज़ में विवरण पा सकते हैं। एसेट पाइपलाइन
<पी> हमने देखा है कि कैसेbin/rails tailwindcss:watch हमारी स्टाइलशीट को स्थानीय विकास मोड में अद्यतन रखता है। यदि हमें केवल एक बार स्टाइलशीट बनाने की आवश्यकता है, तो हम bin/rails tailwindcss:build का उपयोग कर सकते हैं इसके बजाय. <पी> उत्पादन उपयोग के लिए, आप bin/rails assets:precompile पर भरोसा कर सकते हैं सीधे bin/rails tailwindcss:build पर कॉल करने के लिए . <पी> रूबी ऑन रेल्स एप्लिकेशन के लिए एसेट पाइपलाइन के बारे में और जानें। कार्रवाई में रेल के लिए टेलविंड
<पी> आइए कुछ दृश्यों में टेलविंड के कुछ व्यावहारिक उपयोग देखें:एक रूप और एक प्रतिक्रियाशील नेविगेशन बार।एक सरल प्रपत्र
<पी> रूबी ऑन रेल्स जनरेटर का उपयोग करके, हम एकuser बनाते हैं संसाधन: <पी> फिर हम users_controller.rb को बदल सकते हैं फ़ाइल करें और फ़ॉर्म के लिए एक दृश्य बनाएं। <पी> हम प्रत्येक टुकड़े को व्यक्तिगत रूप से स्टाइल करते हैं, टेक्स्ट रंग, पृष्ठभूमि रंग, बॉर्डर, पैडिंग, मार्जिन आदि को समायोजित करते हैं। यहां मानक टेलविंड से परे कुछ भी नहीं है, फिर भी हम अपनी आवश्यकताओं के अनुरूप फॉर्म को अनुकूलित करते हैं। एक उत्तरदायी नेविगेशन बार
<पी> हम टेलविंड में किसी भी उपयोगिता वर्ग का उपयोग करके ब्राउज़र की न्यूनतम चौड़ाई के आधार पर सशर्त ब्रेकप्वाइंट जोड़ सकते हैं। उदाहरण के लिए, निम्न शीर्षक विंडो आकार के आधार पर रंग बदल देगा: <पी> डिफ़ॉल्ट रूप से, रंग भूरे रंग का गहरा शेड होता है। जब ब्राउज़र विंडो की चौड़ाई 640px और 1024px के बीच होती है, तो यह चैती रंग की होती है। यदि किसी विंडो की चौड़ाई 1024px से अधिक है, तो यह बैंगनी रंग की छाया है। <पी> चूंकि टेलविंड कॉलम को भी संभाल सकता है, यहां यह दिखाने के लिए एक उदाहरण दिया गया है कि विंडो आकार के आधार पर किसी तत्व की कॉलम की चौड़ाई कैसे बदल सकती है: <पी> इस मामले में लेबल "राज्य" दो या तीन कॉलमों तक फैला है। <पी> यहां, टेलविंड की ग्रिड लेआउट उपयोगिताओं का उपयोग करके, हम एक ग्रिड को परिभाषित करते हैं जो है:- डिफ़ॉल्ट रूप से एक कॉलम चौड़ा (
grid-cols-1) - 640px चौड़ाई से अधिक चौड़े छह कॉलम
- 768px चौड़ाई से अधिक चौड़े आठ कॉलम
sm:640pxmd:768pxlg:1024pxxl:1280px2xl:1536px
टेलविंड बनाम अन्य फ्रेमवर्क
<पी> अब जब हम समझ गए हैं कि टेलविंड का उपयोग कैसे किया जा सकता है, तो आइए अन्य रूपरेखाओं से इसके प्रमुख अंतरों की समीक्षा करें:- उपयोगिता-आधारित: हम विशिष्ट सीएसएस कक्षाओं का उपयोग करके प्रत्येक तत्व की शैली बनाते हैं, प्रत्येक शैली के विभिन्न भागों पर ध्यान केंद्रित करते हैं।
- हमें जो चाहिए वह प्राप्त करें: हमें केवल वे हिस्से मिलते हैं जिनकी हमें अपनी वेबसाइट को शिप करने के लिए आवश्यकता होती है, जिससे लोड समय तेज हो जाता है; जो निर्माण समय को अनुकूलित करता है।
- एक्स्टेंसिबल: हम एक साधारण कॉन्फ़िगरेशन फ़ाइल के माध्यम से TailwindCSS के डिफ़ॉल्ट को बढ़ा या अनुकूलित कर सकते हैं।
- रंगों की आसान छायांकन: उदाहरण के लिए, होवर स्थितियों को संभालने के लिए किसी रंग का हल्का या गहरा शेड कैसे बनाया जाए, यह जानने की कोई आवश्यकता नहीं है।
- सरल रिक्ति: छिपे हुए और आनुपातिक पैमाने अंतर को सरल बनाते हैं।
- कम कस्टम सीएसएस: चूंकि हम केवल शैली तत्वों के लिए कक्षाएं इकट्ठा करते हैं, हम कस्टम सीएसएस पर कम भरोसा करते हैं और HTML फ़ाइलों और स्निपेट का उपयोग करके शैलियों (संपूर्ण थीम सहित) साझा कर सकते हैं।
- रूबी ऑन रेल्स फ्रेंडली: टेलविंड मणि के लिए धन्यवाद, सब कुछ लेआउट और संपत्ति पाइपलाइन में एकीकृत है।
समापन
<पी> जैसा कि हमने देखा है, टेलविंड का उपयोगिता-प्रथम दृष्टिकोण रूबी ऑन रेल्स के लिए बहुत उपयुक्त है। हमें जटिल कस्टम कॉन्फ़िगरेशन या अतिरिक्त कस्टम सीएसएस जोड़कर अपनी आवश्यकताओं को पूरा करने के लिए टेलविंड को समायोजित करने में समय बर्बाद करने की आवश्यकता नहीं है। जैसे ही हम अपने विचारों और आंशिकताओं की कल्पना करते हैं, हम उन्हें आकार देने और शैली देने के लिए टेलविंड उपयोगिता कक्षाओं का उपयोग कर सकते हैं। <पी> यदि आप अधिक जानना चाहते हैं, तो आप टेलविंड के जीवंत समुदाय और टेलविंडयूआई (टेलविंड के रचनाकारों से) जैसे उत्पादों की बदौलत कई उपयोग में आसान टेम्पलेट और घटकों तक पहुंच सकते हैं। <पी> हैप्पी कोडिंग! <पी> पी.एस. यदि आप प्रेस से हटते ही रूबी मैजिक पोस्ट पढ़ना चाहते हैं, तो हमारे रूबी मैजिक न्यूज़लेटर की सदस्यता लें और एक भी पोस्ट न चूकें!
