सबसे अक्सर, एक तकनीकी स्टैक निर्णय जो एक बार सही महसूस किया गया था, अपनी सीमाओं को दिखाना शुरू कर देता है - जैसे कि एक पावर ड्रिल का उपयोग करने के बाद एक स्क्रूड्राइवर कितना अप्रभावी है. HackerNoon के Styled Components के उपयोग के साथ ऐसा ही हुआ है. वर्षों के लिए, यह हमें अच्छी तरह से सेवा कर रहा था - स्पेक्ट्रम शैलियों, गतिशील थीमिंग, और हमारे रिएक्ट घटक के भीतर पूर्ण नियंत्रण प्रदान करता है. लेकिन जैसा कि हमारी कोडबेस विकसित हुई और Tailwind CSS जैसे उपकरण परिपक्व हो गए, यह स्पष्ट हो गया कि एक बदलाव देरी से हो गया था.
स्टाइलिश घटकTailwind सीएसएस परिवर्तन देरी से हो चुका है।
यह पोस्ट स्टाइलेड घटक से Tailwind सीएसएस के लिए हमारे स्विच का एक टुकड़ा है, हमने क्यों कदम उठाया, मैं इस संक्रमण के लिए कैसे पहुंच गया, और प्रक्रिया अब तक कैसी दिख रही है. यदि आप विरासत शैलियों के साथ काम कर रहे हैं या अपने स्वयं के परियोजनाओं के लिए Tailwind पर विचार कर रहे हैं, तो उम्मीद है कि यह आपको कुछ उपयोगी (या कम से कम प्रासंगिक) प्रदान करता है।
Why HackerNoon Originally Used Styled Components
मैं टीम का हिस्सा नहीं था जब स्टाइलिड Components को पहली बार हमारे सीएसएस को संभालने के लिए चुना गया था, लेकिन उस समय, Tailwind CSS को भी जारी नहीं किया गया था, और स्टाइलिड Components HackerNoon के फ्रंट-एंड आर्किटेक्चर के लिए बहुत अर्थ था।Tailwind CSS को भी जारी नहीं किया गया था
यह डेवलपर्स को सीएसएस सीधे जावास्क्रिप्ट के भीतर लिखने की अनुमति देता है, जिससे घटकों को पूरी तरह से स्व-आधारित किया जा सकता है. इस दृष्टिकोण को प्रकृति में बहुत “रेक्ट-नाइट” महसूस होता है- encapsulated, reusable, और, उस समय, एक बढ़ते कोडबेस और टीम के माध्यम से बनाए रखने के लिए को आसान माना जाता था. गतिशील शैलीकरण क्षमताएं, अंतर्निहित थीमिंग समर्थन, और शैलियों में सीधे प्रॉप्स स्थानांतरित करने की क्षमता विशेष रूप से अच्छी तरह से काम कर रही थीं हमने बनाए गए पृष्ठों और लेआउट की व्यापक विविधता के लिए।कैप्सूलित, पुनः उपयोग किया जा सकता है, और, उस समय, बनाए रखने के लिए आसान माना जाता थाStyled Components ने HackerNoon को अच्छी तरह से सेवा की
What Made Us Consider Switching to Tailwind?
समय के साथ, हमारे कोडबेस बढ़ गए - और प्रबंधन शैलियों की जटिलता भी।
Styled Components ने हमें लचीलापन दिया, लेकिन यह एक लागत के साथ आया: बड़े बंडल आकार, runtime performance hits, और क्लटरेटेड घटक संरचना जो तेजी से लंबे स्टाइल ब्लॉकों से भरा हुआ था।बड़े बंडल आकारruntime performance hits कटौती घटकों की संरचना
हमने यह भी देखा कि हमारे कई शैलियों को विभिन्न घटकों पर दोहराया जा रहा था. यह तब था जब Tailwind CSS बहुत सराहना करना शुरू कर दिया. उपयोगिता-पहले दृष्टिकोण ने सब कुछ सरल करने का एक तरीका महसूस किया - लेआउट से अनुकूलता तक और यहां तक कि थीमिंग तक।Tailwind सीएसएस
लेकिन चलो वास्तविक बनें: HackerNoon की तरह छोटे डेवलपर टीम के लिए, एक बड़े पैमाने पर कोडबेस लाइन प्रति लाइन को पुनर्निर्मित करने का विचार एक विशाल उद्यम के रूप में महसूस हुआ।HackerNoon की तरह छोटे डेवलपर टीम लाइन प्रति लाइन इस स्विच का सबसे कठिन हिस्सा? Setup. Tailwind को स्थापित करना सरल था, लेकिन एक बार जब यह सक्रिय था, तो Tailwind के वैश्विक शैलियों - Preflight के लिए धन्यवाद - हमारे मौजूदा घटकों के साथ संघर्ष करना शुरू कर दिया। यहां एक जिंदगी बचाने वाला वहां से, मुझे नए अनुबंध स्थापित करना पड़ा- हम वैश्विक शैलियों को कैसे संभालेंगे, कक्षाओं का पुनः उपयोग करेंगे, और Tailwind के साथ विषय-जागरूक घटकों का निर्माण करेंगे।नए समझौते स्थापित करें और यहाँ वह हिस्सा है जिसे मैं अभी भी आश्चर्यचकित करता हूं: आईई ने इस प्रक्रिया को वास्तव में सुखद बना दिया।आईई ने इस प्रक्रिया को वास्तव में सुखद बना दिया। कोड सोलो के हजारों पंक्तियों का पुनरावृत्ति करना पागलपन होगा. लेकिन मैंने हमारे स्टाइलिश घटक को एक बार में Tailwind में परिवर्तित करने के लिए ChatGPT का उपयोग किया. सरल घटकों के लिए - लेआउट, अंतराल, संरचना - यह एक हवा थी. बस पेस्ट, ट्यूट, और जाओ. अब, मुझे ईमानदार होने दो: एआई ने सब कुछ सही नहीं किया। अधिक जटिल, थीम घटक अभी भी मैनुअल कोडिंग और कई घंटों की आवश्यकता थी. लेकिन शुरू करने के लिए एक ठोस आधार होने से चीजों को बहुत आसान बना दिया।अब मुझे ईमानदारी से बताएं:मैन्युअल कोडिंग और कई घंटे उपयोगिता वर्ग मानसिकता मैं कहने के लिए खुश हूँ Tailwind अब HackerNoon पर लाइव है! 🎉 As of now, the HackerNoon Homepage is fully converted to Tailwind CSS, with Styled Components completely removed. Most of the other pages still rely on Styled Components, and they’ll be converted gradually—one component, one page at a time. यह धीमी दृष्टिकोण वास्तव में एक आशीर्वाद था। प्रत्येक घटक को पुनर्निर्मित करने से मुझे revit और हमारे पृष्ठों के डिजाइन और संरचना में सुधार करने का अवसर मिला। Tailwind रूपांतरण के साथ, हमने एक अधिक आधुनिक यूआई, बेहतर लेआउट उपयोग, नए घटक, और यहां तक कि एक कस्टम-बिल्डिंग थीम picker पेश किया जो हमारे पुराने थीम सिस्टम को शर्मिंदा करता है।संपादित करें और सुधार करेंऔर अधिक आधुनिक यूआईकस्टम-बिल्डिंग थीम पिकर हैकरनोन में 4 से अधिक वर्षों तक काम करने के बाद, मुझे लगता है reignited हमारे कोडबेस में फिर से डुबकी। Tailwind ने निर्माण को फिर से मज़ेदार बना दिया है. यह साफ, स्थिर और शक्तिशाली है-और मैं आगे बढ़ने के लिए उत्साहित हूं. कौन जानता है? शायद जल्द ही, हम अपने Tailwind सीएसएस के लिए स्थानांतरण सिर्फ एक स्टाइलिंग लाइब्रेरी को बदलने के बारे में नहीं था - यह हमारे फ्रंटएंड कार्य प्रवाह को आधुनिकीकरण करने के बारे में था, निरंतरता को स्वीकार करने और विकास को सरल बनाने के बारे में था. Styled Components ने एक महत्वपूर्ण विकास चरण के दौरान HackerNoon के इंटरफ़ेस को आकार देने में मदद की, लेकिन Tailwind हमें लचीलापन, गति और रखरखाव प्रदान कर रहा है जिसे हम बढ़ते हुए चाहते हैं।संवेदनशीलता, गति और रखरखाव यह अभी भी एक कार्य चल रहा है - हमारे ऐप में अभी भी कई स्टाइलेड घटक हैं - लेकिन Tailwind को हमारे होमपेज पर और नए refactored घटकों में लाइव देखना अविश्वसनीय रूप से पुरस्कृत है। HackerNoon विकसित हो रहा है, और हमारे शैलियाँ इसके साथ विकसित हो रही हैं।How I Made the Switch
preflight: false को tailwind.config.js फ़ाइल में सेट कर रहा था. यह कदम Tailwind के अधिकांश बेस रीसेट को अक्षम कर दिया, जो कुछ आदेश वापस लाया।preflight: falsetailwind.config.jsTailwind के अधिकांश बेस रीसेट को अक्षम कर दिया
जिस तरह प्रवास अब तक दिखता है
package.json से styled-components हटा देंगे। reignited से जुड़े अन्य समाचार »styled-componentspackage.json
Final Tailwinding Thoughts
