Hver så ofte, en tech stack beslutning, der engang følte sig rigtigt begynder at vise sine grænser - som at indse, hvor ineffektiv en skruetrækker er efter at have brugt en power drill. I årevis har det tjent os godt – tilbyder omfattende stilarter, dynamisk temaindstilling og fuld kontrol inden for vores React-komponenter. Det er blevet tydeligt, at a Styled Components Tailwind CSS change was overdue. Dette indlæg er en nedbrydning af vores skift fra Styled Components til Tailwind CSS, hvorfor vi gjorde bevægelsen, hvordan jeg nærmede mig overgangen, og hvordan processen har set ud indtil videre. Hvorfor HackerNoon oprindeligt brugte stylede komponenter Jeg var ikke en del af teamet, da Styled Components først blev valgt til at håndtere vores CSS, men på det tidspunkt, , og Styled Components gjorde en masse mening for HackerNoon's front-end arkitektur. Tailwind CSS hadn’t even been released Det tillod udviklere at skrive CSS direkte i JavaScript, hvilket gør komponenterne helt selvindholdige. De dynamiske styling-funktioner, indbygget temaunderstøttelse og evnen til at videregive props direkte til stilarter fungerede især godt for det brede udvalg af sider og layouts, vi byggede. af . encapsulated, reusable, and, at the time, thought to be easier to maintain Styled Components served HackerNoon well Hvad fik os til at overveje at skifte til Tailwind? Over tid voksede vores kodebase – og det samme gjorde kompleksiteten af styles. Styled Components gav os fleksibilitet, men det kom til en pris: , der og a Det blev sværere at spore stilarter eller genbruge dem effektivt uden at duplikere kode. larger bundle sizes runtime performance hits cluttered component structure Vi bemærkede også, at mange af vores stilarter blev gentaget på tværs af komponenter. Den utility-first tilgang føltes som en måde at strømline alt – fra layout til responsivitet og endda theming. Tailwind CSS Men lad os være virkelige: for en , ideen om at refactoring en massiv codebase Det føltes som en stor begivenhed. Men vi kunne ikke ignorere, hvor bredt Tailwind blev vedtaget i udviklingsfællesskabet. small dev team like HackerNoon’s line by line Hvordan jeg lavede switch Den sværeste del af dette skifte? Setup. Installationen af Tailwind var enkel, men når den var aktiv, begyndte Tailwinds globale stilarter - takket være Preflight - at kollidere med vores eksisterende komponenter. En livredder her blev sat I den Filmen bevæger sig Selvfølgelig var der stadig mindre stylingproblemer at løse, men tingene så mindre ud som en krigszone. preflight: false tailwind.config.js disabled most of Tailwind’s base resets Derfra måtte jeg Hvordan vi håndterer globale stilarter, genbruger klasser og bygger tema-bevidste komponenter med Tailwind. establish new conventions Og her er den del, jeg stadig er forbløffet over: AI made this process actually enjoyable. Refactoring tusindvis af linjer af kode solo ville have været vanvid. Men jeg brugte ChatGPT til at konvertere vores stylede komponenter til Tailwind en ad gangen. For enkle komponenter - layouts, spacing, struktur - det var en brise. AI fik ikke alt rigtigt. mere komplekse, tematiske komponenter er stadig påkrævet Men at have et solidt fundament at starte med gjorde tingene så meget nemmere. Tailwinds dokumentation hjalp også med at fylde hullerne, og når jeg fuldt ud omfavnede Så begyndte tingene at klikke. Now, let me be honest: manual coding and plenty of hours utility class mindset Hvordan migranterne har set ud indtil videre Jeg er glad for at sige Tailwind is now live on HackerNoon! Fra nu af, den  to Tailwind CSS, with Styled Components completely removed. Most of the other pages still rely on Styled Components, and they’ll be converted gradually— af . HackerNoon Homepage is fully converted one component, one page at a time HackerNoon hjemmeside er fuldt konverteret Denne langsommere tilgang har faktisk været en velsignelse.Refactoring hver komponent gav mig mulighed for at udformningen og strukturen af vores sider. Sammen med Tailwind-konverteringen introducerede vi en , bedre layout brug, nye komponenter og endda en Det gør vores gamle system til skamme. revisit and improve more modern UI custom-built theme picker Efter at have arbejdet på HackerNoon i mere end 4 år, føler jeg Tailwind har gjort byggeriet sjovt igen. Det er rent, konsekvent og kraftfuldt – og jeg er spændt på at fortsætte med at skubbe konverteringen fremad. Fra vores Det er godt. 😉 reignited styled-components package.json Afsluttende tailwinding tanker Flytningen til Tailwind CSS handlede ikke kun om at udskifte et stylingbibliotek – det handlede om at modernisere vores frontend-arbejdsproces, omfavne konsistens og forenkle udviklingen. Vi er nødt til at fortsætte med at skalere. flexibility, speed, and maintainability Det er stadig et arbejde i gang – vores app har stadig masser af Styled Components – men at se Tailwind live på vores hjemmeside og i nyligt refactorede komponenter har været utroligt givende. HackerNoon udvikler sig, og vores stilarter udvikler sig med det.

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

Denne lyd er produceret på historiens originalsprog!

Fra stilfulde komponenter til Tailwind CSS: A HackerNoon Migration Story

About Author

KOMMENTARER

HÆNG TAGS

DENNE ARTIKEL BLEV PRÆsenterET I

Related Stories

Meet Surfshark: HackerNoon Company of the Week

Avoid These Mistakes to Monetize Internet Products Profitably

Meet inDrive: The HackerNoon Company of the Week

Meet IONOS: HackerNoon Company of the Week

Meet Surfshark: HackerNoon Company of the Week

Avoid These Mistakes to Monetize Internet Products Profitably

Meet inDrive: The HackerNoon Company of the Week

Meet IONOS: HackerNoon Company of the Week

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps