¿Tailwind CSS o Styled Components para un proyecto de React?

Sustainable

Para mi próximo proyecto, dudo entre dos formas de estilizar los componentes: Tailwind CSS (utility-first) o una solución de CSS-in-JS como Styled Components o Emotion.

Vengo de usar SASS y me gusta tener los estilos en archivos separados. Tailwind me parece que "ensucia" el HTML, pero a la vez es muy rápido. Styled Components me parece más "limpio" a nivel de JSX, pero no sé si el rendimiento es un problema. ¿Qué preferís y por qué?

Alt

Yo me pasé de Styled Components a Tailwind y no vuelvo atrás. Al principio también pensaba que "ensuciaba" el JSX, pero una vez que te acostumbras, es mucho más productivo. No tienes que andar saltando entre archivos ni pensando nombres para las clases. Además, el rendimiento es superior porque Tailwind genera un CSS estático en tiempo de build, mientras que las soluciones CSS-in-JS tienen un pequeño coste de rendimiento en tiempo de ejecución.

Broadway

La gran ventaja de Styled Components es poder usar props de React para cambiar los estilos de forma dinámica. Es muy potente para crear componentes reutilizables y con lógica compleja de estilizado. Tailwind es genial para la maquetación rápida, pero para la lógica de componentes, CSS-in-JS sigue siendo muy superior en mi opinión.

Sustainable

Gracias por las opiniones. Parece que la elección depende de si priorizo la velocidad de maquetación (Tailwind) o la lógica de estilos en los componentes (Styled Components). ¡Buen debate!