Instalación y configuración

La instalación de Tailwind se resume en tres comandos, y sin embargo es la etapa en la que más tiempo se pierde. El escenario es siempre el mismo: todo funciona en desarrollo, despliegas y la mitad de los estilos ha desaparecido en producción. O bien un color definido en la configuración sigue siendo ignorado con obstinación. O bien el autocompletado no propone nada y llevas veinte minutos escribiendo text-grey-500 antes de entender que la paleta se escribe gray.

Estos tres síntomas tienen el mismo origen: Tailwind solo conoce las clases que ha visto escritas en claro en tus archivos fuente. No es un motor que interprete tu aplicación en tiempo de ejecución, sino una herramienta que lee texto durante la compilación. Mientras este modelo no esté claro, cada incidencia parece cosa de magia negra. Una vez que lo está, las tres cuartas partes de los problemas de instalación se diagnostican en diez segundos.

Puesta en marcha en un proyecto Vite

Es el caso más habitual y el más rápido, tanto si tu proyecto usa React, Vue, Svelte o Astro. Dos paquetes, un plugin, una línea de CSS.