Configuración de Tailwind CSS

Cuando empecé a usar Tailwind CSS, lo primero que noté fue la velocidad. Poder construir interfaces directamente desde las clases cambia completamente la forma de trabajar con estilos.

Pero más allá de usarlo con CDN, entender cómo configurarlo correctamente es lo que realmente hace la diferencia en proyectos reales.

Usando Tailwind con CDN

La forma más rápida de empezar es usando el CDN. Es ideal para pruebas o proyectos pequeños donde no necesitas configuración avanzada.

<script src="https://cdn.tailwindcss.com"></script>

Con esto ya puedes usar clases directamente en tu HTML sin instalación adicional.

Limitaciones del CDN

Aunque es práctico, el CDN tiene limitaciones importantes cuando el proyecto empieza a crecer.

• ✦No puedes personalizar completamente el diseño
• ✦No elimina clases no utilizadas
• ✦No es óptimo para producción

Configuración con Node

Para proyectos más serios, es mejor instalar Tailwind con Node. Esto permite personalizar estilos y optimizar el CSS final.

npm install -D tailwindcss
npx tailwindcss init

Esto genera el archivo tailwind.config.js, donde puedes definir colores, tipografías y otros ajustes del proyecto.

Personalización básica

Una de las ventajas más importantes es poder adaptar Tailwind a tu propio sistema de diseño.

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#2563eb',
      }
    }
  }
}

Esto permite mantener consistencia en todo el proyecto sin repetir estilos manualmente.

Compilación y optimización

Tailwind genera solo el CSS que realmente utilizas, lo que mejora el rendimiento del sitio.

npx tailwindcss -i ./src/input.css -o ./assets/css/output.css --watch

Para producción, puedes usar:

npx tailwindcss -i ./src/input.css -o ./assets/css/output.css --minify

Qué aporta Tailwind en proyectos reales

Tailwind no reemplaza CSS, cambia la forma en la que lo escribes.

— Equipo Windsoft

Conclusión

Tailwind CSS puede parecer diferente al inicio, pero una vez que entiendes su flujo de trabajo, se vuelve una herramienta muy potente.

Empezar con CDN es útil, pero trabajar con configuración personalizada es lo que realmente permite aprovechar todo su potencial.