6-TailwindCSS en un Proyecto Node.js

 

Instalando TailwindCSS en un Proyecto Node.js con Express y Pug

 Estructura del Proyecto

Antes de comenzar, revisemos la organización del proyecto:

Copy

Download

BIENESRAICES_MVC/
├── controllers/
├── node_modules/
├── public/
│   ├── css/
│   │   ├── app.css
│   │   └── tailwind.css
│   ├── img/
│   └── js/
├── routes/
├── views/
│   ├── auth/
│   │   ├── login.pug
│   │   └── registro.pug
│   └── layout/
│       └── index.pug
├── package.json
└── tailwind.config.cjs

En este tutorial te mostraré cómo integrar TailwindCSS en un proyecto Node.js que utiliza Express como framework y Pug como motor de plantillas.

Prerrequisitos

• Tener Node.js instalado

• Un proyecto Node.js con Express y Pug configurado

Pasos para instalar TailwindCSS

1. Instalar las dependencias necesarias

Primero, instala TailwindCSS y sus dependencias usando npm:

bash

Copy

Download

npm install -D tailwindcss postcss autoprefixer

2. Inicializar TailwindCSS

Ejecuta el siguiente comando para generar los archivos de configuración:

bash

Copy

Download

npx tailwindcss init -p

Esto creará dos archivos:

• tailwind.config.js

• postcss.config.js

3. Configurar TailwindCSS

Abre tu tailwind.config.cjs y configura las rutas de tus plantillas Pug:

javascript

Copy

Download

module.exports = {
  content: [
    './views/**/*.pug',
    './views/auth/login.pug'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. Crear el archivo CSS principal

En public/css/tailwind.css, añade las directivas de Tailwind:

css

Copy

Download

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Configurar el script de compilación

En tu package.json, añade el siguiente script:

json

Copy

Download

"scripts": {
  "css": "postcss public/css/tailwind.css -o public/css/app.css"
}

6. Solucionar problema de módulos

Si tu package.json tiene "type": "module", necesitarás renombrar los archivos de configuración:

• Cambia postcss.config.js a postcss.config.cjs

• Cambia tailwind.config.js a tailwind.config.cjs

7. Compilar TailwindCSS

Finalmente, ejecuta:

bash

Copy

Download

npm run css

Esto generará tu archivo CSS final en public/css/app.css.

Configuración en Express

Asegúrate de servir los archivos estáticos correctamente:

javascript

Copy

Download

import express from 'express'
import usuarioRoutes from './routes/usuarioRoutes.js'

const app = express()

// Habilitar Pug
app.set('view engine', 'pug')
app.set('views', './views')

// Carpeta Pública
app.use(express.static('public'))

// Routing
app.use('/auth', usuarioRoutes)

Conclusión

Ahora tienes TailwindCSS correctamente configurado en tu proyecto Node.js con Express y Pug. Puedes comenzar a usar las clases de Tailwind en tus plantillas Pug y cada vez que hagas cambios, ejecuta npm run css para recompilar tus estilos.

Para desarrollo, puedes añadir el flag --watch al script para que se recompile automáticamente:

json

Copy

Download

"scripts": {
  "css:watch": "postcss public/css/tailwind.css -o public/css/app.css --watch"
}

Configuración de Contenido en TailwindCSS

En la configuración de TailwindCSS, las dos líneas que mencionas tienen propósitos similares pero con diferente alcance:

Diferencia entre las dos rutas

1. './views/**/*.pug':

   • Este es un patrón global que usa globbing patterns

   • ** significa "cualquier subdirectorio recursivamente"

   • *.pug significa "cualquier archivo con extensión .pug"

   • En conjunto, significa: "Busca todos los archivos .pug en cualquier subdirectorio dentro de views/"

2. './views/auth/login.pug':

   • Esta es una ruta específica a un archivo concreto

   • Solo analizará este archivo en particular para las clases de Tailwind

¿Se puede quedar con solo una línea?

Sí, puedes y deberías quedarte solo con la primera línea ('./views/**/*.pug'), porque:

1. La línea global ya incluye todos los archivos PUG en todos los subdirectorios, incluyendo login.pug

2. Es más mantenible - no necesitas añadir cada nuevo archivo manualmente

3. Tailwind optimiza el CSS final basado en las clases que encuentra, por lo que no afecta el rendimiento

Configuración recomendada

javascript

Copy

Download

module.exports = {
  content: [
    './views/**/*.pug' // Esta línea sola es suficiente
  ],
  // ... resto de la configuración
}

Solo necesitarías añadir rutas específicas adicionales si:

• Tienes archivos HTML/CSS/JS fuera de la estructura principal que usan clases de Tailwind

• Quieres limitar específicamente qué archivos debe analizar Tailwind (por razones de rendimiento en proyectos muy grandes)

En tu caso, con la estructura mostrada, la línea global cubre todas tus necesidades