Instalar Tailwind CSS con Next.js

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

La forma más rápida de comenzar a usar Tailwind CSS en tu proyecto Next.js es usar el ejemplo Next.js + Tailwind CSS. Esto configurará automáticamente tu configuración de Tailwind según el ejemplo oficial de Next.js.

Si deseas configurar Tailwind manualmente, continúa con el resto de esta guía.

1- Crea tu proyecto

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

npx create-next-app my-project
cd my-project

2- Instalar Tailwind CSS

Instala tailwindcss y sus dependencias de pares a través de npm y luego ejecuta el comando init para generar tanto tailwind.config.js como postcss.config.js.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3- Configura tus rutas de plantilla

Agrega las rutas a todos tus archivos de plantilla en tu archivo tailwind.config.js:

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4- Agrega las directivas de Tailwind a tu CSS

Agrega las directivas @tailwind para cada una de las capas de Tailwind a tu archivo ./styles/globals.css:

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

5- Comienza tu proceso build

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

npm run dev

6- Comienza a usar Tailwind en tu proyecto

Comienza a usar las clases de utilidad de Tailwind para diseñar tu contenido.

Veamos un ejemplo en el archivo index.js:

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