Instalar Tailwind CSS con Next.js

Configurando 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 usar Create Next App.

Terminal

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

Instala @tailwindcss/postcss y sus dependencias peer 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 ./src/app/globals.css que importe Tailwind CSS.

globals.css

@import "tailwindcss";

Ejecuta tu proceso de build con npm run dev.

Terminal

npm run dev

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

page.tsx

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