Configuración inicial de Tailwind CSS con Node

Instala y configura Tailwind CSS paso a paso con Node.js y npm para crear una landing page lista para compilar. Aquí verás cómo preparar el entorno, iniciar el proyecto, crear el archivo de configuración, definir los imports de base, componentes y utilidades, y generar el CSS final para usarlo en tu sitio con live server.

¿Cómo preparar el entorno y crear el proyecto con Tailwind CSS?

Antes de empezar, asegúrate de tener una terminal, un editor de código, Node.js y un navegador. Si falta algo, instala y configura primero para avanzar sin bloqueos.

¿Qué comandos inician el proyecto con npm y npx?

• Inicializa el proyecto con una configuración por defecto.

npm init -g

• Instala Tailwind CSS como dependencia de desarrollo con el flag de dev.

npm install -d tailwindcss

• Crea el archivo de configuración en la raíz del proyecto.

npx tailwindcss init

• Abre el proyecto en tu editor. Si usas VS Code:

code .

Al instalar, pueden sumarse muchos paquetes al directorio node_modules. En el ejemplo, se agregaron 112 paquetes en modo desarrollo. Todo esto se utiliza durante el proceso de compilación y pruebas locales.

¿Por qué usar dependencia de desarrollo y no en producción?

Porque Tailwind CSS se usa en tiempo de desarrollo para generar el CSS final. En producción se sirve el archivo compilado, no el paquete de Tailwind. Así reduces peso y evitas cargar recursos innecesarios.

¿Qué archivos y configuraciones iniciales necesitas?

Asegura un index.html base y crea un archivo para los estilos fuente de Tailwind en la raíz. En el contenido se creó un archivo llamado “Tailwind” y se añadieron imports para base, componentes y utilidades.

¿Cómo declarar imports de base, componentes y utilidades?

• Crea el archivo de estilos de entrada (por ejemplo, “Tailwind”).
• Añade los imports de Tailwind para estructurar el CSS: base, components y utilities.

@import "tailwindcss base";
@import "tailwindcss components";
@import "tailwindcss utilities";

Esto prepara la estructura base, los componentes preconstruidos y las utilidades que usarás en el HTML.

¿Cómo enlazar el CSS compilado en el HTML?

En tu HTML elimina el CDN de Tailwind si lo tenías, ya que ahora vas a trabajar con compilación local y un CSS optimizado. Enlaza el archivo de salida, por ejemplo, styles.css.

<link rel="stylesheet" href="styles.css" />

Esta ruta debe coincidir con el output que definas al compilar.

¿Qué script agrega el build de Tailwind a package.json?

En la sección de scripts agrega un comando que tome el archivo fuente y genere el CSS final. Por ejemplo:

{
  "scripts": {
    "tailwind": "npx tailwindcss -i Tailwind -o styles.css"
  }
}

• -i: archivo de entrada con tus imports y clases personalizadas.
• -o: archivo de salida que enlazarás desde el HTML.

¿Cómo compilar estilos y ver el resultado en el navegador?

Con todo listo, ejecuta el script de compilación, verifica el archivo generado y abre el proyecto en el navegador con live server.

¿Qué comando ejecuta el proceso de compilado?

• Compila desde la terminal:

npm run tailwind

El proceso reestructura el proyecto y genera styles.css con todas las utilidades necesarias. En el ejemplo, terminó en 99 microsegundos y el archivo resultante incluye múltiples líneas con las clases requeridas según tu HTML.

¿Cómo probar en el navegador con live server?

• Abre tu index.html con live server desde el editor o la terminal.
• Verás el sitio funcionando con el CSS compilado. Así confirmas que el enlace a styles.css está correcto y que Tailwind se aplica.

¿Qué conceptos clave aplicas en este flujo?

• Dependencia de desarrollo: instalación con -d para usar en entorno local.
• Archivo de configuración: se genera con npx tailwindcss init en la raíz.
• CDN vs compilado: el compilado entrega solo el CSS que necesitas.
• Scripts de npm: automatizan el build para no escribir comandos largos.
• Compilado y output: de un archivo fuente a styles.css listo para producción.
• Live server: visualización inmediata en el navegador durante el desarrollo.

Como siguiente paso, crea una sección hero con un botón que invite a la acción. Si te animas, toma un screenshot y compártelo en los comentarios: ¿qué clases de utilidades usaste y por qué?