Cómo instalar y configurar TailwindCSS paso a paso

Instalación de Node.js y npm

Asegúrate de tener Node.js y npm instalados en tu sistema. Puedes descargarlo desde Node.js official site.

Crear un proyecto nuevo

Crea una nueva carpeta para tu proyecto y navega a ella en la terminal:

mkdir mi-proyecto
cd mi-proyecto

Instala TailwindCSS

Instala TailwindCSS a través de npm:

npm install -D tailwindcss
npx tailwindcss init

Esto creará un archivo tailwind.config.js en tu proyecto.

Configura TailwindCSS

En tu archivo tailwind.config.js, puedes personalizar la configuración según tus necesidades. Aquí hay un ejemplo básico:

module.exports = { content: [ "./**/*.{html,js}" ], theme: { extend: {}, }, plugins: [],
}

Configura los archivos CSS

Crea un archivo CSS y agrega las directivas de Tailwind:

/* src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Para añadir un par de plugins a tu configuración de TailwindCSS, sigue estos pasos:

Instalar TailwindCSS y sus dependencias

Instalaremos PostCSS y Autoprefixer:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Crear un archivo de configuración de PostCSS

Crea un archivo postcss.config.js en la raíz de tu proyecto con el siguiente contenido:

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

Añadir plugins en TailwindCSS

Edita el archivo tailwind.config.js para incluir los plugins que deseas usar. Aquí hay dos ejemplos de plugins:

Plugin para tipografía y formularios personalizados

Primero, instala los plugins:

npm install -D @tailwindcss/typography @tailwindcss/forms

Luego, edita tu tailwind.config.js para incluir los plugins:

module.exports = { content: [ './**/*.{html,js}', ], theme: { extend: {}, }, plugins: [ require('@tailwindcss/typography'), require('@tailwindcss/forms'), ],
}

Con estos pasos, has añadido con éxito dos plugins a tu configuración de TailwindCSS: uno para mejorar la tipografía y otro para manejar formularios personalizados.

Compila tu CSS

Configura un script en tu package.json para compilar el CSS:

"scripts": { "build": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch"
}

Ejecuta el script:

npm run build

Usa TailwindCSS en tu HTML

Crea un archivo HTML index.html y enlaza tu archivo CSS compilado:

 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./dist/styles.css" rel="stylesheet"> <title>Mi Proyecto con TailwindCSS</title> <h1> ¡Hola, TailwindCSS! </h1>

Ejecuta y prueba

Abre el archivo HTML en tu navegador para ver los estilos aplicados.