Tailwind es poderoso cuando se usa bien. El desafío es que es fácil caer en HTML lleno de clases. La solución es aplicar una estructura mínima.
Utilidad primero no significa abandonar componentes
Tailwind es utilidades, cierto. Pero no significa escribir style="" en HTML antiguo. Significa componentes React con clases Tailwind aplicadas sensatamente.
La diferencia: en lugar de escribir CSS, escribes clases. El resultado es igual de limpio si haces componentes.
- Componentes React encapsulan clases.
- Utilities Tailwind en lugar de CSS custom.
- Extracomponentes para patrones repetidos.
Cómo no caer en HTML ilegible
Hay técnicas. Una es usar @apply en CSS para agrupar clases. Otra es crear componentes para cosas complejas. La mejor es mantener componentes pequeños con propósito único.
Si un componente tiene más de 5-6 clases Tailwind, es candidato a refactorizar.
- Componentes pequeños, una responsabilidad.
- Usa @apply para agrupar clases complejas.
- Extrae patrones a sub-componentes.
Tema y customización sin perder el espíritu de Tailwind
Tailwind permite customización profunda en tailwind.config.js. Colores, spacing, fuentes. El beneficio de mantener tu paleta centralizada es que cambios de branding se propagan automáticamente.
Sin abuso: personalización sensata mejora, personalización excesiva convierte Tailwind en CSS custom.
- Extiende colores y spacing según tu marca.
- Mantén la convención de nombres.
- Evita customizaciones que quebrantan el sistema.
Purga y tamaño de archivo
Tailwind genera CSS para todas las clases posibles. En producción, purga las que no usas. En desarrollo, el CSS es pesado pero eso no importa. En build, solo lo que usas llega al cliente.
Un proyecto Tailwind bien configurado debería tener CSS minificado bajo 20KB. Si es mayor, probablemente estás importando utilidades que no usas.
Dinámico vs estático: qué no hacer
Nunca construyas clases dinámicamente: className={`text-${color}`} no funciona porque Tailwind no las ve en el escaneo estático. En lugar de eso, mapea valores fijos a clases.
Las herramientas no pueden adivinar CSS dinámicamente. Que sea estática en el código fuente, aunque el valor venga de una variable.