So oft beginnt eine Tech-Stack-Entscheidung, die sich einmal als richtig gefühlt hat, ihre Grenzen zu zeigen - wie das Erkennen, wie ineffizient ein Schraubendreher ist, nachdem er ein Power-Bohrgerät benutzt hat.Styled ComponentsJahrelang hat es uns gut gedient – es bietet umfangreiche Stile, dynamische Themen und volle Kontrolle innerhalb unserer React-Komponenten.Tailwind CSSErwachsen wurde, wurde klar, dass achange was overdue.
Dieser Beitrag ist ein Abbruch unseres Wechseln von Styled Components zu Tailwind CSS, warum wir den Wechsel gemacht haben, wie ich den Wechsel näherte und wie der Prozess bisher aussah.
Warum HackerNoon ursprünglich gestylte Komponenten verwendete
Ich war nicht Teil des Teams, als Styled Components zuerst ausgewählt wurde, um mit unserem CSS umzugehen, aber zu der Zeit,Tailwind CSS hadn’t even been released, und Styled Components machten viel Sinn für die Front-End-Architektur von HackerNoon.
Es ermöglichte es den Entwicklern, CSS direkt innerhalb von JavaScript zu schreiben, so dass Komponenten vollständig selbstständig sind.encapsulated, reusable, and, at the time, thought to be easier to maintainDie dynamischen Styling-Fähigkeiten, die integrierte Themengestaltung und die Fähigkeit, Props direkt in Stile zu übertragen, funktionierten besonders gut für die breite Palette von Seiten und Layouts, die wir bauten.Styled Components served HackerNoon well... .
Was hat uns dazu gebracht, über den Wechsel zum Tailwind nachzudenken?
Im Laufe der Zeit wuchs unsere Code-Basis – und so auch die Komplexität von Management-Styles.
Styled Components gaben uns Flexibilität, aber das kostete:larger bundle sizes, derruntime performance hitsund acluttered component structureEs wurde immer schwieriger, Stile zu verfolgen oder sie effektiv wiederzuverwenden, ohne Code zu duplizieren.
Wir haben auch bemerkt, dass sich viele unserer Stile über Komponenten hinweg wiederholten.Tailwind CSSDer utility-first-Ansatz fühlte sich wie eine Möglichkeit, alles zu rationalisieren - von der Layout bis zur Reaktionsfähigkeit und sogar zum Thema.
Aber lasst uns real sein: für einesmall dev team like HackerNoon’s, die Idee, eine massive Codebase neu zu gestaltenline by lineEs fühlte sich wie ein riesiges Unternehmen an. Dennoch konnten wir nicht ignorieren, wie weit Tailwind in der Dev-Community angenommen wurde.
Wie ich den Switch gemacht habe
Der schwierigste Teil dieses Wechsels?Setup.
Die Installation von Tailwind war einfach, aber sobald es aktiv war, begannen die globalen Stile von Tailwind – dank Preflight – mit unseren bestehenden Komponenten zu kollidieren.
Ein Lebensretter hier setzte sichpreflight: falseIn dertailwind.config.jsDatei, die sich bewegtdisabled most of Tailwind’s base resetsNatürlich gab es noch kleinere Stylingprobleme zu beheben, aber die Dinge sahen weniger aus wie eine Kriegszone.
Von dort aus musste ichestablish new conventionsWie wir mit globalen Stilen umgehen, Klassen wiederverwenden und themenbewusste Komponenten mit Tailwind bauen würden.
Und hier ist der Teil, den ich immer noch überrascht bin:AI made this process actually enjoyable.
Tausende von Zeilen von Code-Solo neu zu gestalten, wäre Wahnsinn gewesen. Aber ich nutzte ChatGPT, um unsere gestylten Komponenten zu einem Mal in Tailwind umzuwandeln. Für einfache Komponenten - Layouts, Spaziergänge, Struktur - war es ein Wind.
Now, let me be honest:AI hat nicht alles richtig gemacht.Komplexe, thematische Komponenten sind immer noch erforderlichmanual coding and plenty of hoursAber eine solide Basis zu haben, um von Anfang an zu beginnen, machte die Dinge so viel einfacher. Tailwinds Dokumentation half auch, die Lücken zu füllen, und sobald ich das vollständig umarmteutility class mindsetDie Dinge fingen an zu klicken.
Wie die Migration bisher aussah
Ich bin froh zu sagenTailwind is now live on HackerNoon!
Ab sofort, dieHackerNoon Homepage vollständig umgewandeltTailwind CSS, mit Styled Components vollständig entfernt. Die meisten anderen Seiten verlassen sich immer noch auf Styled Components, und sie werden allmählich konvertiert —one component, one page at a time... .
HackerNoon Homepage vollständig umgewandelt
Dieser langsame Ansatz war in der Tat ein Segen. Die Neufaktorisierung jeder Komponente gab mir die Möglichkeit,revisit and improvedas Design und die Struktur unserer Seiten. Neben der Tailwind-Konvertierung haben wir einemore modern UIbessere Layoutverwendung, neue Komponenten und sogar einecustom-built theme pickerDas bringt unser altes Themensystem zur Schande.
Nach mehr als vier Jahren bei HackerNoon habe ich das Gefühl,reignitedTailwind hat das Bauen wieder Spaß gemacht. Es ist sauber, konsistent und leistungsstark – und ich bin begeistert, die Konvertierung weiter voranzutreiben.styled-componentsVon unsererpackage.jsonZum Guten 😉
Final Tailwinding Gedanken
Der Übergang zu Tailwind CSS ging nicht nur darum, eine Styling-Bibliothek auszutauschen – es ging darum, unseren Frontend-Workflow zu modernisieren, Konsistenz zu akzeptieren und die Entwicklung zu vereinfachen.flexibility, speed, and maintainabilityWir brauchen es, wenn wir weiter schieben.
Es ist immer noch eine Arbeit im Gange – unsere App hat immer noch viele Styled Components – aber Tailwind live auf unserer Homepage und in neu umgestalteten Komponenten zu sehen, war unglaublich lohnend.
HackerNoon entwickelt sich, und unsere Stile entwickeln sich mit ihm.
