Tailwind CSS 4
Tailwind 4 elimina el archivo de config, compila en microsegundos, y el agente lo entiende como texto plano. Cualquier regla que aplica un estilo está a la vista — no hay CSS escondido en archivos separados. Para agentes, es la mejor decisión de styling posible hoy.
Utility-first mantenible — si respetas tokens, si no, caos legible.
Por qué funciona con agentes
- Tokens explícitos:
text-[var(--cobalt-800)]es literal; el agente no tiene que cruzar archivos. - Compila rápido: el agente no espera minutos tras cada cambio.
- Nada oculto: todo estilo está en el template. Diff legible.
La disciplina que hay que imponer
Tailwind sin tokens se convierte en sopa de clases arbitrarias. La regla: si vas a usar un color más de una vez, es token. En este curso el design system vive en src/app.css con --cobalt-*, --ink, --paper. El agente lee esas variables y las respeta.
Qué configurar
En Tailwind 4, la config se hace en CSS con @theme. Nada de tailwind.config.js. Tu skill del agente debe tener esa convención escrita.
Busca en tu proyecto todos los hex literales (`#[0-9a-fA-F]{6}`). ¿Cuántos hay? Si son más de 10, falta token system.
- Tailwind 4 + tokens = styling legible para el agente.
- Regla: color usado 2+ veces es token.
- Sin disciplina, Tailwind se vuelve sopa de clases. La skill lo previene.