हर बार, एक तकनीकी स्टैक निर्णय जो एक बार सही महसूस किया गया था, अपनी सीमाओं को दिखाना शुरू कर देता है - जैसे कि एक पावर ड्रिल का उपयोग करने के बाद एक स्क्रूड्राइवर कितना अप्रभावी है।Styled Componentsवर्षों के लिए, यह हमें अच्छी तरह से सेवा करता है-विश्व शैलियों, गतिशील थीमिंग, और हमारे रिएक्ट घटक के भीतर पूर्ण नियंत्रण प्रदान करता है।Tailwind CSSगौरतलब है, यह स्पष्ट हो गया है कि एकchange was overdue.
यह पोस्ट स्टाइलेड घटक से Tailwind सीएसएस के लिए हमारे स्विच का एक टुकड़ा है, हमने क्यों कदम उठाया, मैं इस संक्रमण के लिए कैसे पहुंच गया, और प्रक्रिया अब तक कैसी दिख रही है. यदि आप विरासत शैलियों के साथ काम कर रहे हैं या अपने स्वयं के परियोजनाओं के लिए Tailwind पर विचार कर रहे हैं, तो उम्मीद है कि यह आपको कुछ उपयोगी (या कम से कम संदर्भित) प्रदान करता है।
क्यों HackerNoon मूल रूप से स्टाइलेड घटक का उपयोग किया
मैं टीम का हिस्सा नहीं था जब स्टाइलिड Components को पहली बार हमारे सीएसएस को संभालने के लिए चुना गया था, लेकिन उस समय,Tailwind CSS hadn’t even been released, और Styled Components ने HackerNoon के फ्रंट-एंड आर्किटेक्चर के लिए बहुत अर्थ दिया।
यह डेवलपर्स को सीएसएस सीधे जावास्क्रिप्ट के भीतर लिखने की अनुमति देता है, जिससे घटकों को पूरी तरह से स्व-आधारित किया जा सकता है।encapsulated, reusable, and, at the time, thought to be easier to maintainएक बढ़ते कोडबेस और टीम के माध्यम से. गतिशील शैलीकरण क्षमताओं, अंतर्निहित थीमिंग समर्थन, और शैलियों में सीधे प्रॉप्स स्थानांतरित करने की क्षमता विशेष रूप से विभिन्न पृष्ठों और लेआउट के लिए अच्छी तरह से काम कर रही थी हम बना रहे थे. लंबे समय तक,Styled Components served HackerNoon well.
क्या हमें Tailwind पर स्विच पर विचार करने के लिए प्रेरित करता है?
समय के साथ, हमारी कोडबेस बढ़ी - और प्रबंधन शैलियों की जटिलता भी।
Styled Components ने हमें लचीलापन दिया, लेकिन यह एक लागत के साथ आया:larger bundle sizes,runtime performance hitsऔर Acluttered component structureअधिक से अधिक लंबे स्टाइलिश ब्लॉकों से भरा हुआ था. कोड को दोहराने के बिना शैलियों को ट्रैक करना या उन्हें प्रभावी ढंग से फिर से उपयोग करना मुश्किल हो रहा था।
हमने यह भी देखा कि हमारे कई शैलियों ने घटकों पर दोहराया था।Tailwind CSSउपयोगिता-पहले दृष्टिकोण ने सब कुछ सरल बनाने का एक तरीका महसूस किया - लेआउट से प्रतिक्रिया और यहां तक कि थीमिंग तक।
लेकिन चलो वास्तविक बनें: एक के लिएsmall dev team like HackerNoon’s, एक बड़े पैमाने पर कोडबेस को पुनर्निर्मित करने का विचारline by lineहालांकि, हम यह अनदेखा नहीं कर सकते थे कि डेवलपमेंट समुदाय में Tailwind कितनी व्यापक रूप से अपनाया जा रहा था।
कैसे मैंने स्विच बनाया
इस बदलाव का सबसे कठिन हिस्सा?Setup.
Tailwind को स्थापित करना सरल था, लेकिन एक बार जब यह सक्रिय था, तो Tailwind के वैश्विक शैलियों - Preflight के लिए धन्यवाद - हमारे मौजूदा घटकों के साथ संघर्ष करना शुरू कर दिया।
यहां एक जीवित रहने वाला थाpreflight: falseमेंtailwind.config.jsयह फ़ाइल चलती हैdisabled most of Tailwind’s base resetsनिश्चित रूप से, अभी भी छोटे शैली के मुद्दों को ठीक करने के लिए थे, लेकिन चीजें एक युद्ध क्षेत्र की तरह नहीं दिखती थीं।
वहां से, मुझे करना पड़ाestablish new conventionsहम वैश्विक शैलियों को कैसे संभालते हैं, कक्षाओं का पुन: उपयोग करते हैं, और Tailwind के साथ विषय-जागरूक घटकों का निर्माण करते हैं।
और यहाँ वह हिस्सा है जिसे मैं अभी भी आश्चर्यचकित करता हूं:AI made this process actually enjoyable.
कोड सोलो के हजारों पंक्तियों का पुनरावृत्ति करना पागलपन होगा. लेकिन मैंने हमारे स्टाइलिश घटकों को एक बार में Tailwind में परिवर्तित करने के लिए ChatGPT का उपयोग किया. सरल घटकों के लिए - लेआउट, अंतराल, संरचना - यह एक हवा थी. बस पेस्ट, ट्यूशन, और जाओ.
Now, let me be honest:एआई ने सब कुछ सही नहीं किया. अधिक जटिल, थीम वाले घटक अभी भी आवश्यक हैंmanual coding and plenty of hoursलेकिन शुरू करने के लिए एक ठोस आधार होने से चीजें बहुत आसान हो गईं. Tailwind का दस्तावेज भी अंतर को भरने में मदद करता है, और एक बार जब मैंने पूरी तरह से इसे स्वीकार कियाutility class mindsetचीजें क्लिक करना शुरू कर देती हैं।
अब तक प्रवासन कैसे दिख रहा है
मैं खुशी से कहता हूंTailwind is now live on HackerNoon!
अब तक, यहHackerNoon Homepage is fully convertedTailwind CSS, Styled Components को पूरी तरह से हटा दिया गया है. अधिकांश अन्य पृष्ठ अभी भी Styled Components पर भरोसा करते हैं, और वे धीरे-धीरे परिवर्तित किए जाएंगे—one component, one page at a time.
HackerNoon Homepage पूरी तरह से परिवर्तित किया गया है
यह धीमी दृष्टिकोण वास्तव में एक आशीर्वाद रहा है. प्रत्येक घटक को पुनर्निर्मित करने से मुझे अवसर मिलाrevisit and improveहमारे पृष्ठों के डिजाइन और संरचना. Tailwind रूपांतरण के साथ, हमने एकmore modern UI, बेहतर लेआउट उपयोग, नए घटक, और यहां तक कि एकcustom-built theme pickerइससे हमारे पुराने सिस्टम को शर्म आती है।
4 साल से अधिक समय तक हेलमेट में काम करने के बाद, मुझे लगता है किreignitedहमारी कोडबेस में दोबारा डुबकी. Tailwind ने निर्माण को फिर से मज़ेदार बना दिया है. यह साफ, स्थिर और शक्तिशाली है – और मैं आगे बढ़ने के लिए उत्साहित हूं. कौन जानता है? शायद जल्द ही, हम हटा देंगेstyled-componentsहमारे सेpackage.jsonअच्छे के लिए 😉
आखिरी विचारों का आविष्कार
Tailwind सीएसएस के लिए स्थानांतरण सिर्फ एक स्टाइलिंग पुस्तकालय को बदलने के बारे में नहीं था - यह हमारे फ्रंटएंड कार्य प्रवाह को आधुनिकीकरण करने के बारे में था, स्थिरता को स्वीकार करना, और विकास को सरल बनाना।flexibility, speed, and maintainabilityहमें चढ़ने की जरूरत है, चढ़ने की जरूरत है।
यह अभी भी एक काम चल रहा है - हमारे ऐप में अभी भी कई स्टाइलेड घटक हैं - लेकिन Tailwind को हमारे होमपेज पर और हाल ही में पुनर्निर्माण किए गए घटकों में लाइव देखना अविश्वसनीय रूप से पुरस्कृत है।
HackerNoon विकसित हो रहा है, और हमारे शैलियाँ इसके साथ विकसित हो रही हैं।
