टेलविंडसीएसएस? मुझे रहने दो

हाल ही में, मैंने एक प्रोजेक्ट में Tailwindcss का उपयोग किया और आप जानते हैं क्या? कम से कम इतना तो कहा ही जा सकता है कि यह आंखें खोल देने वाला अनुभव था।

आप में से कुछ लोग सोच रहे होंगे: टेलविंडसीएस क्या है?

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

तो समस्या क्या है? शीर्षक में '' टेलविंडसीएसएस'' क्यों लिखा है? नहीं धन्यवाद ”?

यह शीर्षक बताता है कि ऐसे उदाहरण हो सकते हैं जब टेलविंड सीएसएस अपनी उत्कृष्टता के बावजूद, आपकी परियोजनाओं के लिए इष्टतम विकल्प नहीं हो सकता है। ऐसा क्यों हो सकता है? एक उत्तर है. फिर भी, इससे पहले कि हम स्पष्टीकरण में उतरें, आइए प्रौद्योगिकी की इस परीक्षा के लिए आधार तैयार करें।

सभी सीएसएस के साथ क्या है?

इससे पहले कि हम टेलविंडसीएस और इसके विकास की पेचीदगियों में उतर सकें, हमें कुछ शर्तों को पूरा करना होगा।

सीएसएस क्या है?

CSS का मतलब कैस्केडिंग स्टाइल शीट्स है। मेरी राय में सीएसएस की सबसे अच्छी परिभाषा techterms.com से आती है

“सीएसएस एक स्टाइल शीट भाषा है जिसका उपयोग HTML वेबपेजों में सामग्री को फ़ॉर्मेट करने के लिए किया जाता है। सीएसएस स्टाइल शीट पाठ, तालिकाओं और अन्य तत्वों की उपस्थिति और स्वरूपण को सामग्री से अलग से परिभाषित कर सकती है। शैलियाँ किसी वेब पेज की HTML फ़ाइल में या एकाधिक वेबपेजों द्वारा संदर्भित एक अलग दस्तावेज़ में पाई जा सकती हैं।

कम शब्दों में: सीएसएस एक स्टाइलिंग भाषा है। आप अपने वेबपेज या वेब ऐप को उत्कृष्ट दिखाने के लिए HTML तत्वों पर CSS का उपयोग करते हैं।

टेलविंडसीएसएस क्या है?

Tailwindcss टीम के शब्दों में, Tailwindcss "एक उपयोगिता-पहला CSS फ्रेमवर्क है जो flex , pt-4 , text-center और rotate-90 जैसी कक्षाओं से भरा हुआ है , जिसे सीधे आपके मार्कअप में किसी भी डिज़ाइन को बनाने के लिए तैयार किया जा सकता है "।

इसका अनिवार्य रूप से मतलब है कि टेलविंड सीएसएस मूल सीएसएस प्रक्रियाओं और संचालन को लेता है और फिर उन्हें करना और लागू करना आसान बनाता है।

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

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

CSS और Tailwindcss के बीच अंतर

टेलविंडसीएस कैसा दिखता है? आइए एक वेनिला सीएसएस समकक्ष और फिर एक टेलविंडसीएसएस समकक्ष बनाकर तुलना करें।

आइए देखें कि उपरोक्त पाठ में क्या चल रहा है। यह एक HTML 5 अंश है और हम एक बटन का निर्माण कर रहे हैं।

बटन का निर्माण करने के लिए हम इसे " divs " के माध्यम से सेट करते हैं - हमारी वेबसाइट या वेब ऐप को बदलने के लिए चीजों को इनपुट करने के लिए अनिवार्य रूप से छोटे कंटेनर। हम प्रत्येक डिव को उसकी अपनी " क्लास " देते हैं ताकि हम बाद में अपनी अलग सीएसएस फ़ाइल में उस विशेष तत्व को संदर्भित कर सकें। हालाँकि, आप divs को उनकी अपनी " आईडी " भी दे सकते हैं। आप " इन-लाइन " सीएसएस परिवर्तन कर सकते हैं, जिसका अर्थ है कि आप सीएसएस को सीधे HTML फ़ाइल में डाल सकते हैं, लेकिन अधिकांश लोग संगठन के लिए इससे बचते हैं।

सीएसएस फ़ाइल में, बटन को संपादित करने के लिए हमारा कोड कैसा दिख सकता है?

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

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

अब, उपरोक्त कोड क्या करता है? यह बिल्कुल वही करता है जो मूल CSS कोड करता है, भले ही थोड़ा अलग तरीके से।

आइए नियमित सीएसएस बनाम टेलविंडसीएसएस समकक्ष पर एक और नज़र डालें।

उपरोक्त छवि में, हम HTML5 दस्तावेज़ में " कार्ड-आईएमजी " वर्ग के अंतर्गत चॉकलेट की एक तस्वीर आयात कर रहे हैं। आइए देखें कि संबंधित सीएसएस कैसा दिखता है।

उपरोक्त सीएसएस कोड पिछले वाले के समान है। बहुत गहराई से एक्सट्रपलेशन की जरूरत नहीं है. हम चॉकलेट कार्ड के स्वरूप को परिभाषित कर रहे हैं। आइए अब अधिक दिलचस्प Tailwindcss संस्करण देखें।

उपरोक्त कोड Tailwindcss समतुल्य है। यह बहुत सरल और अधिक सुरुचिपूर्ण है, लेकिन यह जानने के लिए बहुत अधिक प्रयास की आवश्यकता है कि हर चीज का क्या मतलब है और बयानों को कैसे रखा जाए। तो क्या यह पारंपरिक सीएसएस की तुलना में एक फायदा है?

Tailwindcss की प्रकृति इसे बहुत गन्दा बनाती है। आपका सारा कोड, HTML और CSS दोनों, एक फ़ाइल में होंगे और लंबे और भीड़ भरे प्रतीत होंगे। इससे विकास करना कठिन हो जाता है।

टेलविंडसीएसएस के मुख्य नुकसान क्या हैं?

• तीव्र सीखने की अवस्था जिसकी आदत पड़ने में समय लगता है।
• कस्टम क्लास घटक बनाने होंगे. (यह एक लंबे प्रोजेक्ट पर बहुत कुछ जोड़ सकता है)।
• भ्रमित करने वाली बात है क्योंकि HTML और स्टाइल मिश्रित हैं

इसके मुख्य लाभ क्या हैं?

• अत्यधिक अनुकूलन योग्य

• तेजी से विकास

• चाहे कुछ भी जोड़ा या संपादित किया जा रहा हो, सुसंगत शब्द और पैटर्न।

  
  

हमने टेलविंडसीएसएस के उदाहरण देखे हैं और अब हम मुख्य फायदे और नुकसान जानते हैं। लेकिन, यह कितना लोकप्रिय है?

इसे पुराने और नए दोनों डेवलपर्स के बीच अपनाया और बढ़ाया गया है।

Tailwindweekly.com के विवियन गुइलेन ने कहा कि 19 नवंबर, 2022 तक Tailwindcss ने 4.5 मिलियन साप्ताहिक डाउनलोड प्राप्त किए थे। जैसा कि मैं यह लिख रहा हूं, यदि आप npmjs.com पर जाते हैं और Tailwindcss खोजते हैं तो इसके 336 मिलियन डाउनलोड हैं। 5 साल पहले रिलीज़ होने के बाद से यह प्रतिदिन औसतन 184,110 डाउनलोड है। डाउनलोड की अविश्वसनीय मात्रा।

टेलविंड पर समापन

इससे पहले, इस टुकड़े की शुरुआत में, मैंने लिखा था, " ऐसा समय या समय हो सकता है जब टेलविंडसीएस आपकी परियोजनाओं के लिए इष्टतम समाधान नहीं है"। मैंने यह क्यों लिखा? और इसका शीर्षक से क्या संबंध है? “टेलविंडसीएसएस? मुझे रहने दो "।

टेलविंडसीएसएस लगभग सभी फ्रंटएंड डेवलपर्स के बीच विश्व स्तर पर लोकप्रिय है, इसे पारंपरिक सीएसएस की तुलना में लागू करना आसान लगता है और यह अपने प्रकार की अन्य तकनीकों की तुलना में अधिक अनुकूलन क्षमता प्रदान करता है। हेक, मेरे द्वारा इसके उपयोग ने इस लेख को भी प्रेरित किया। तो मुझे अब भी इस पर संदेह क्यों है? क्योंकि बेशक मैंने इसका इस्तेमाल किया ।

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

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

यदि आप मेरी सदस्यता लेते हैं तो आप पता लगा सकते हैं और हम जल्द ही एक-दूसरे से मिलेंगे;)