Muchas veces, una decisión de tech stack que una vez se sintió correcta comienza a mostrar sus límites, como darse cuenta de lo ineficiente que es un tornillo después de usar una perforación de potencia. Esto ha sido el caso con el uso de Styled Components por parte de HackerNoon. Durante años, nos sirvió bien, ofreciendo estilos escalonados, temas dinámicos y control total dentro de nuestros componentes de React. Pero a medida que nuestra base de código evolucionó y herramientas como Tailwind CSS maduraron, se hizo claro que un cambio estaba atrasado.
Componentes de estiloCSS de corta duraciónEl cambio fue tardío.
Este post es una ruptura de nuestro cambio de Styled Components a Tailwind CSS, por qué hicimos el movimiento, cómo me acercé a la transición, y cómo ha parecido el proceso hasta ahora.Si está trabajando con estilos legados o considerando Tailwind para sus propios proyectos, espero que esto le dé algo útil (o al menos relativo) para irse con.
Por qué HackerNoon originalmente usó componentes estilizados
No formé parte del equipo cuando Styled Components fue elegido por primera vez para manejar nuestro CSS, pero en ese momento, Tailwind CSS ni siquiera había sido lanzado, y Styled Components hizo mucho sentido para la arquitectura front-end de HackerNoon.
Tailwind CSS ni siquiera había sido lanzado
Permitió a los desarrolladores escribir CSS directamente dentro de JavaScript, haciendo que los componentes estén completamente independientes.Este enfoque se sintió muy "React-native" en la naturaleza -encapsulado, reutilizable, y, en el momento, se pensaba que era más fácil de mantener en una creciente base de código y equipo. Las capacidades de estilo dinámico, el soporte de temática integrado y la capacidad de pasar props directamente a los estilos trabajaron especialmente bien para la amplia variedad de páginas y diseños que estábamos construyendo.encapsulado, reutilizable y, en ese momento, pensado para ser más fácil de mantenerComponentes estilizados sirvieron bien a HackerNoon
¿Qué nos hizo considerar el cambio a Tailwind?
Con el tiempo, nuestra base de código creció, así como la complejidad de los estilos de gestión.
También notamos que muchos de nuestros estilos se estaban repitiendo en todos los componentes.Eso fue cuando Tailwind CSS comenzó a tener mucho sentido.El enfoque de utilidad en primer lugar se sintió como una forma de simplificar todo, desde el diseño hasta la receptividad e incluso el tema.
CSS de corta duración
Pero seamos reales: para un pequeño equipo de desarrolladores como HackerNoon, la idea de refactorizar una base de código masiva línea por línea parecía un gran esfuerzo.pequeño equipo de desarrollo como HackerNoon'sLínea por línea
Cómo hice el cambio
La parte más difícil de este interruptor? Setup.
Configuración
La instalación de Tailwind fue sencilla, pero una vez que se activó, los estilos globales de Tailwind, gracias a Preflight, comenzaron a chocar con nuestros componentes existentes.
Un salvador aquí estaba configurando preflight: false en el archivo tailwind.config.js. Ese movimiento deshabilitó la mayoría de las restauraciones de base de Tailwind, lo que devolvió algún orden.preflight: falsetailwind.config.jsDeshabilitó la mayoría de las restauraciones de base de Tailwind
De allí, tuve que establecer nuevas convenciones—cómo abordar los estilos globales, reutilizar clases y construir componentes conscientes del tema con Tailwind.establecer nuevas convenciones
Y aquí está la parte que todavía me sorprende: AI hizo este proceso realmente agradable.
La IA ha hecho que este proceso sea realmente agradable.
Refactorizar miles de líneas de código solo habría sido una locura. pero usé ChatGPT para convertir nuestros componentes estilizados en Tailwind uno a la vez. Para componentes simples -layouts, espaciamiento, estructura- era una brisa.
Ahora, déjame ser honesto: la IA no lo consiguió todo bien.Los componentes más complejos y temáticos todavía necesitaban codificación manual y muchas horas.Pero tener una base sólida para comenzar hizo las cosas mucho más fáciles.La documentación de Tailwind también ayudó a llenar las lagunas, y una vez que abrazé completamente la mentalidad de la clase de utilidad , las cosas comenzaron a hacer clic.
Ahora, déjame ser sincero:codificación manual y muchas horasMente de clase de utilidadLo que la migración parece hasta ahora
Estoy feliz de decir que Tailwind ahora está en vivo en HackerNoon! 🎉
Tailwind ya está en vivo en 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.
HackerNoon Homepage is fully convertedHackerNoon Homepage is fully convertedun componente, una página a la vez
Este enfoque más lento ha sido realmente una bendición.Refactorizar cada componente me dio la oportunidad de revisitar y mejorar el diseño y la estructura de nuestras páginas.Junto a la conversión de Tailwind, introdujeron un UI más moderno, un mejor uso de diseño, nuevos componentes e incluso un selector de temas personalizado que pone en vergüenza nuestro viejo sistema de temas.
revisar y mejorar más moderno UIPicker de temas personalizados
Después de trabajar en HackerNoon durante más de 4 años, me siento reignited sumergido en nuestra base de código de nuevo. Tailwind ha hecho la construcción divertida de nuevo. Es limpio, consistente y poderoso – y estoy emocionado de seguir impulsando la conversión hacia adelante. ¿Quién sabe? Quizás pronto, vamos a borrar styled-components de nuestro package.json para siempre. 😉
styled-componentspackage.json
Final Tailwinding Pensamientos
El paso a Tailwind CSS no se trataba sólo de reemplazar una biblioteca de estilo, sino de modernizar nuestro flujo de trabajo frontend, abrazando la coherencia y simplificando el desarrollo.Mientras que Styled Components ayudó a dar forma a la interfaz de HackerNoon durante una fase crítica de crecimiento, Tailwind nos está dando la flexibilidad, velocidad y mantenimiento que necesitamos a medida que continuamos escalando.
Flexibilidad, velocidad y mantenimiento
Todavía es un trabajo en curso —nuestra aplicación todavía tiene un montón de Componentes Estilizados— pero ver a Tailwind en vivo en nuestra página de inicio y en componentes recién refactorizados ha sido increíblemente gratificante.El hecho de que pueda combinar la IA con mi propia experiencia para refactor más rápido ha hecho que esta transición no sólo se sienta factible sino emocionante.
HackerNoon está evolucionando, y nuestros estilos están evolucionando con ello.
