Instalar Tailwind CSS con Next.js

Configuración de Tailwind CSS en un proyecto Next.js.

Comienza creando un nuevo proyecto Next.js si aún no tienes uno configurado. El enfoque más común es utilizar Create Next App.

Terminal

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

Instala @tailwindcss/postcss y sus dependencias directas a través de npm.

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Crea un archivo postcss.config.mjs en la raíz de tu proyecto y añade el plugin @tailwindcss/postcss a tu configuración de PostCSS.

postcss.config.mjs

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

Añade un @import a ./app/globals.css que importe Tailwind CSS.

globals.css

@import "tailwindcss";

Ejecuta tu proceso de compilación con npm run dev.

Terminal

npm run dev

Comienza a usar las clases de utilidad de Tailwind para dar estilo a tu contenido.

page.tsx

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