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

This story contains new, firsthand information uncovered by the writer.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Check out my projects

यह ऑडियो कहानी की मूल भाषा में निर्मित है!

स्टाइलिड घटक से Tailwind सीएसएस: एक हैकरनोन प्रवास कहानी

About Author

टिप्पणियाँ

लेबल

इस लेख में चित्रित किया गया था

Related Stories

He/Him/Master of Discovery

AI की शक्ति को उन्मुक्त करना। अत्याधुनिक तकनीकों की एक व्यवस्थित समीक्षा: सार और परिचय

HackerNoon एक बहुभाषी प्लेटफ़ॉर्म है: सभी शीर्ष कहानियाँ अब 13 भाषाओं में उपलब्ध हैं

फ़ोरम से फ़ीड तक: सोशल मीडिया एल्गोरिदम डिजिटल इंटरैक्शन को कैसे आकार देते हैं

He/Him/Master of Discovery

AI की शक्ति को उन्मुक्त करना। अत्याधुनिक तकनीकों की एक व्यवस्थित समीक्षा: सार और परिचय

HackerNoon एक बहुभाषी प्लेटफ़ॉर्म है: सभी शीर्ष कहानियाँ अब 13 भाषाओं में उपलब्ध हैं

फ़ोरम से फ़ीड तक: सोशल मीडिया एल्गोरिदम डिजिटल इंटरैक्शन को कैसे आकार देते हैं

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps