Para configurar Next.js com Tailwind CSS, siga estas etapas:

Etapa 1: Crie um novo projeto Next.js

Se você ainda não criou um projeto Next.js, você pode criar um usando create-next-app.

npx create-next-app@latest my-next-app
cd my-next-app

Etapa 2: instalar o Tailwind CSS

Dentro de seu projeto Next.js, instale Tailwind CSS junto com suas dependências necessárias.

npm install -D tailwindcss postcss autoprefixer

Etapa 3: inicializar CSS do Tailwind

Inicialize o Tailwind CSS gerando os arquivos tailwind.config.js e postcss.config.js.

npx tailwindcss init -p

Isso criará os arquivos tailwind.config.js e postcss.config.js na raiz do seu projeto.

Etapa 4: configurar tailwind.config.js

Substitua o conteúdo de tailwind.config.js pela seguinte configuração para ativar o Tailwind nos arquivos relevantes:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Etapa 5: adicione Tailwind CSS aos seus arquivos CSS

Em seu projeto, abra ou crie o arquivo ./styles/globals.css e adicione as seguintes linhas para importar a base, os componentes e os utilitários do Tailwind:

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

Etapa 6: execute o servidor de desenvolvimento

Agora, inicie o servidor de desenvolvimento para ver o Tailwind CSS em ação:

npm run dev

Seu projeto Next.js agora deve ser configurado com Tailwind CSS. Você pode usar classes de utilitário Tailwind em seus componentes para estilizá-los.

Exemplo de uso

Aqui está um exemplo de uso do Tailwind CSS em uma página Next.js (pages/index.js):

export default function Home() {
  return (
    

      

        Welcome to Next.js with Tailwind CSS!
      
    
  );
}

Com esta configuração, agora você pode começar a construir seu aplicativo Next.js usando a estrutura CSS utilitária do Tailwind!