# Cómo instalar y configurar TailwindCSS paso a paso

> Aprende TailwindCSS paso a paso desde la instalación hasta la configuración de plugins y personalización de estilos.

- URL canónica: https://www.martagonzalez.dev/blog/como-instalar-y-configurar-tailwindcss-paso-a-paso/
- Fecha de publicación: 2024-06-17T05:02:35
- Última actualización: 2025-11-05T15:04:04

---

![Cómo instalar y configurar TailwindCSS paso a paso](https://martagonzalez.dev/wp/wp-content/uploads/2024/06/como-instalar-y-configurar-tailwindcss-paso-a-paso.avif)
 
## 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](https://nodejs.org/).
 
## 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:
 
 Mi Proyecto con TailwindCSS ¡Hola, TailwindCSS! ## Ejecuta y prueba Abre el archivo HTML en tu navegador para ver los estilos aplicados.
 
![Imagen del artículo](https://martagonzalez.dev/wp/wp-content/uploads/2024/06/instalar-y-configurar-tailwindcss-1024x713.avif)