← Blog

Tailwind CSS: por qué lo uso en todos mis proyectos frontend desde 2022

D
Damián Oliva
·22 de enero de 2025

El escepticismo inicial (y cómo desapareció)

Cuando vi Tailwind CSS por primera vez dije lo mismo que dice todo el mundo: "¿Para qué mezclar CSS con HTML? ¿No es lo que se supone que NO hay que hacer?". Eso fue en 2021. Lo usé en un proyecto pequeño casi de casualidad. No lo dejé más.

Tres años y 30+ proyectos después, Tailwind está en absolutamente todo lo que construyo. No porque sea una bala de plata, sino porque resuelve problemas reales de la manera más pragmática que encontré.

La ventaja que más impacta: velocidad de prototipado

El beneficio más visible de Tailwind no es técnico: es de velocidad. Cuando tenés el sistema de clases memorizado (lo que toma unas semanas de uso), maquetás sin cambiar de archivo. No hay que nombrar clases, no hay que pensar si algo es un componente o un elemento. Escribís directamente cómo se ve.

Esa reducción de fricción es enorme en las fases iniciales de un proyecto. Un diseño que en CSS plano me llevaba 2 horas, con Tailwind lo hago en 40 minutos.

Consistencia del design system incorporada

El sistema de tokens de Tailwind (espaciados, colores, tipografías, bordes, sombras) ya implementa un design system razonable. Cuando extendés el config con tus propios tokens de marca, ganás consistencia visual automática: es imposible poner un margin: 13px por accidente porque no existe esa clase.

Esto también hace que cualquier dev que se sume al proyecto entienda las convenciones sin documentación adicional.

Las críticas válidas

Los classnames se vuelven largos. Es verdad. Un botón con hover, focus y estados responsive puede tener 15 clases. Lo mitigás con @apply para patrones repetidos o con componentes React bien abstraídos.

La curva de aprendizaje existe. Las primeras semanas tenés que consultar la documentación constantemente. Usá la extensión de VS Code (Tailwind CSS IntelliSense) desde el día uno: autocomplete, documentación inline y validación de clases.

No es ideal para CSS muy dinámico. Si necesitás valores calculados en runtime que no son predecibles, vas a terminar usando estilos inline de todas formas. Para esos casos, mezclo Tailwind con style={{ ... }} en React sin problemas.

Cuándo no usaría Tailwind

  • Proyectos donde el equipo tiene convenciones CSS muy establecidas con BEM o CSS Modules y no hay tiempo de migrar mentalidad.
  • Sitios donde el CSS necesita ser generado dinámicamente desde el backend (Tailwind requiere conocer las clases en build time con JIT).

Mi configuración de Tailwind para proyectos nuevos

Siempre extiendo el config con tokens de la marca: colores, fuentes, sombras personalizadas. Agrego @tailwindcss/typography para contenido de blog y formularios, y el plugin de forms cuando hay inputs.

Newsletter

Ideas directamente
a tu bandeja de entrada

Comparto lo que estoy construyendo, lo que aprendo y lo que me parece interesante del mundo tech y startups. Sin spam. Cuando tenga algo que valga la pena.

Sin spam. Unsubscribe en cualquier momento.