Tailwind CSS 4 en Next.js: configuración paso a paso

🚀 Introducción

La integración de Tailwind CSS 4 con Next.js representa una de las combinaciones más eficientes para el desarrollo frontend moderno.

Next.js proporciona:

• Renderizado híbrido (SSR, SSG, RSC)
• Optimización automática
• Arquitectura basada en App Router

Mientras que Tailwind CSS ofrece:

• Enfoque utility-first
• Desarrollo rápido de interfaces
• CSS optimizado automáticamente

---

🧱 1. Creación del proyecto

npx create-next-app@latest my-project --typescript --eslint --app
cd my-project

---

📦 2. Instalación de Tailwind CSS

npm install tailwindcss @tailwindcss/postcss postcss

---

⚙️ 3. Configuración de PostCSS

Crea el archivo postcss.config.mjs:

const config = {
  plugins: {
    "@tailwindcss/postcss": {}
  }
};

export default config;

---

🎨 4. Importar Tailwind CSS

En /app/globals.css:

@import "tailwindcss";

---

▶️ 5. Ejecutar el proyecto

npm run dev

---

🧩 6. Uso en componentes

export default function Home() {
  return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
}

---

✅ Buenas prácticas

Evita clases dinámicas incorrectas

❌

<div className={"text-" + size}></div>

✅

<div className={size === "lg" ? "text-lg" : "text-sm"}></div>

---

Organización recomendada

app/
 ├── components/
 ├── layout.tsx
 ├── page.tsx
 └── globals.css

---

🧠 Conclusión

Tailwind CSS 4 junto con Next.js simplifica la configuración inicial y mejora el rendimiento del desarrollo frontend moderno.