Ukusuka ku-Styled Components ku-Tailwind CSS: A HackerNoon Migration Story

Okuningi, isixazululo se-tech-stack esiyingathwa okwenziwe ngempumelelo isixazululo se-limits yayo - njenge-imeyili okungenani okungenani i-screwdriver esisebenzayo ngemuva kokusebenzisa i-power drill. Kuyinto efanayo ne-HackerNoon's usebenzisa i- Styled Components. Kwiiminyaka eminingi, i-imeyili etholakalayo kakhulu - inikeza imicimbi emangalisayo, i-thematic, kanye nenkqubo ephelele ngaphakathi kwezinhlelo zethu ze-React. Kodwa njengoba isisekelo lwethu se-codebase etholakala futhi izixhobo ezifana ne- Tailwind CSS zihlala, kubhalwe ukuthi isI-Components ye-StyledI-CSS ye-Tailwind Ukuguqulwa kwangaphakathi.

Lesi post kuyinto ingxubevange yokuguqulwa kwethu ukusuka Styled Components ku Tailwind CSS, ukuthi kungenzeka ukuthi siphinde, kanjani ngihambe ukuhweba, futhi ukuthi inqubo yaziwa njenge-so far. Uma ungasebenza ne-styles ezivamile noma ukubuyekeza i-Tailwind ngenxa ye-projects yakho, kulindeleke ukuthi lokhu inikeza yini enhle (noma okungenani enhle) yokuhamba.

Why HackerNoon Okokuqala Usetshenziselwa I-Styled Components

Ndiye ngilungu le-team lapho i-Styled Components yasungulwe ngokuvamile ukuhlangabezana ne-CSS yethu, kodwa lapho, i-Tailwind CSS ayizange yasungulwe, futhi i-Styled Components iboniswe kakhulu ku-Front-End Architecture ye-HackerNoon.

Iphrofayili wahlala i-CSS ngqo ku-JavaScript, okwenza izinhlelo ezisebenzayo ngokugcwele. Lolu hlelo lula kakhulu "React-native" emzimbeni— encapsulated, reusable, futhi, ngexesha, kulindeleke ukuba lula ukugcina phakathi kwebhizinisi le-codebase kanye ne-team. Imisebenzi ye-styling enhle, ukweseka kwe-theme eyenziwe, kanye nokukwazi ukuxhumana i-props ngqo ku-stiles iye lula ikakhulukazi ngempumelelo kwebhizinisi amaningi kanye ne-layouts etholakalayo. Ukuze isikhathi eside, Styled Components inikeza HackerNoon kahle.I-encapsulated, i-reusable, futhi, ngeli xesha, ibizwa ukuthi kulula ukuvikelwaI-Styled Components inikeza HackerNoon kahle

What Made Us Consider Switching ukuba Tailwind?

Ngexesha elide, ikhadi lwethu lithunyelwe – kanye ne-complexity ye-management styles.

I-Styled Components inikeza isakhiwo se-components, kodwa okufakiwe nge-cost: ububanzi be-bundle engaphezulu, ukusebenza kwe-runtime hits, futhi isakhiwo se-component eyenziwe nge-blocks e-styled eyenziwe ngempumelelo.izinga ezinkulu ze-bundle Ukusebenza kwe-runtime hitsI-component isakhiwo esihlalweni

Wathanda futhi izindlela zethu ezininzi zihlanganisa phakathi kwezinhlayiyana. Kuyinto lapho Tailwind CSS waqala ukwenza kakhulu. Umgangatho we-utility-first wabhala indlela yokushintshela konke - ukusuka ukubeka ku-responsiveness futhi ngisho kwe-theme.

But let's be real: for a small developer team like HackerNoon's, umqondo refactoring a massive codebase line by line kubonakala njengomthamo enhle. Nokho, asikwazi ukunciphisa ukuthi Tailwind ngokubanzi wasetshenziswe ku-developer. Sithanda.

How I Made the Switch

I-part enhle ye-switch? Setup.

Ukulungiselela i-Tailwind iyona elula, kodwa uma kusebenza, i-Tailwind ye-global styles – ngenxa ye-Preflight – iqala ukuhlangabezana nezinhlangano ethandwa ethandwa. Izinhlangano ziye zihlukile ezingenalutho.

A lifesaver lapha wahlala preflight: iphephile ku tailwind.config.js ifayela. Le isitimela ukushintshwa kakhulu ye-Tailwind base resets, okuholela okungenani umyalezo. Okungenani, kukhona izimo ezincinane ze-styling ukuguqulwa, kodwa izinto zibonakali njenge-war zone.

Ukuqaleni, ngifuna ukuba izakhiwo ezintsha-how thola imifanekiso global, usebenzisa izifundo, futhi ukwakha izingxenye emkhakheni-awusayo nge Tailwind. Uma lokhu isakhiwo yasungulwa, ngifanele ukwakha.

And here’s the part I am still amazed by: I-AI yenza le nkqubo kakhulu.

Ukuhlola amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi amayunithi

Ndiya, sicela ukuguqulwa: I-AI ayikwazanga yonke into. Izinhlelo ezinguqile, ezemikhali zangaphakathi zangaphakathi zangaphakathi nezidingo zokudluliselwa kwe-manual kanye namahora ezininzi. Kodwa ukuthi isisekelo esiyingqayizivele yokufinyelela kwenziwa kakhulu. I-Documentation ye-Tailwind futhi inikeza ukwamukela izixazululo, futhi uma ngithole ngokuphelele i- utility class mindset, izinto zangaphakathi zangaphakathi.

What the Migration Looks Like So Far

Ngicabanga ukuthi I-Tailwind is now live on 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.

Ukuhlezi okusheshayo kwenziwa kakhulu. Ukuguqulwa kwezinhlayiyana ngamunye kunikezela ukubuyekeza futhi ukwandisa design kanye nesakhiwo amakhasi ethu. Ngaphandle kokuguqulwa kwe-Tailwind, sinikeza I-UI esidumile, ukusetshenziswa kwe-layout engcono, izingxenye ezintsha, futhi ngisho i- i-custom-built theme picker enikeza uhlelo lethu le-theme ekubeni.

Ngemuva kokusebenza ku-HackerNoon eminyakeni angaphezu kuka-4 ngonyaka, ngicabanga ukuthi reignited ivimbele kwebhizinisi lwethu. I-Tailwind iye yenza ukwakhiwa kwebhizinisi. Kuyinto enhle, enhle, futhi enhle – futhi ngingathanda ukukhuthaza ukuhanjiswa ngokushesha. Ngingathanda? Mhlawumbi ngokushesha, siyavimbele -styled-components kusuka ku- package.json yethu. 😉

I-Final Tailwinding Thoughts

Ukuguqulwa ku-Tailwind CSS akuyona kuphela ukuguqulwa kwe-styling library-ukuguqulwa kwe-frontend workflow yethu, ukuthatha ukuxhaswa, nokuguqulwa kwe-development. Nakuba i-Styled Components iyasiza ukubunjwa kwe-interface ye-HackerNoon ngesikhathi esizayo yokukhula, i-Tailwind inikeza nathi ukuxhaswa, isivinini, kanye ne-maintenance asitholele ekuphumeni.

Izixazululo esizayo - isicelo lethu sinikeza eziningi ze-Styled Components - kodwa ukubonisa i-Tailwind live ku-homepage yethu kanye ne-components e-refactored ibonile kakhulu. I-fakto ukuthi ngihambe i-AI ne-expertise yami ku-refactor ngokushesha kunikeza lokhu ukuhambisa akuyona kuphela kunokwenzeka kodwa enhle.

I-HackerNoon iyahluka, futhi imifanekiso yethu iyahluka nge-. I-One Component ngexesha.