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.