En esta clase aprenderás a instalar y configurar Tailwind CSS en un proyecto. El enfoque será utilizar un método sencillo y directo que aprovecha la CDN de Tailwind, aunque también exploraremos cómo realizar configuraciones adicionales para un entorno más avanzado.

Instalación de Tailwind CSS

Para comenzar, sigue estos pasos:

1. Uso de la CDN:

   • Si eliminas el enlace a la CDN en tu archivo index.html y recargas la página, verás que Tailwind deja de funcionar, lo cual confirma que necesitas instalarlo correctamente.

2. Instalación con NPM:

   • En la terminal, ejecuta el siguiente comando para instalar las dependencias necesarias:

     npm install tailwindcss postcss autoprefixer
     

   • Esto generará los paquetes requeridos en tu archivo package.json.

3. Configuración Inicial:

   • Crea el archivo de configuración de Tailwind ejecutando:

     npx tailwindcss init
     

   • Este comando generará un archivo tailwind.config.js, donde se define cómo Tailwind procesará los estilos.

Configuración Adicional con PostCSS

Si tu proyecto utiliza PostCSS, sigue estos pasos:

1. Añade la configuración de PostCSS:

   • Si no tienes un archivo postcss.config.js, crea uno y agrega el siguiente contenido:

     module.exports = {
       plugins: {
         tailwindcss: {},
         autoprefixer: {},
       },
     };
     

2. Especifica las rutas de tus archivos:

   • En el archivo tailwind.config.js, configura el contenido indicando las rutas de los archivos donde utilizarás clases de Tailwind:

     content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
     

Compilación de Estilos

Para compilar tus estilos con Tailwind:

1. Añade un script en tu package.json para generar los estilos:

   "scripts": {
     "build": "tailwindcss -i ./src/input.css -o ./dist/output.css --minify",
     "watch": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
   }
   

• build: Compila y minifica los estilos.

• watch: Mantiene un proceso activo para detectar cambios en los archivos y recompilarlos automáticamente.

2. Ejecuta el comando para compilar:

npm run build

Verificación y Pruebas

Asegúrate de enlazar el archivo generado (output.css) en tu archivo index.html para aplicar los estilos.

Si necesitas que los cambios se reflejen automáticamente durante el desarrollo, utiliza:

npm run watch

Conclusión

En esta clase hemos configurado Tailwind CSS utilizando una metodología sencilla y eficiente. También hemos explorado cómo adaptar la configuración con PostCSS para proyectos más avanzados.