Integração do Tailwind CSS com Next.js

O Next.js é uma das escolhas mais populares para aplicações React modernas. Combinado ao Tailwind CSS, ele oferece uma base poderosa para criar interfaces performáticas, responsivas e escaláveis.

A integração entre ambos é simples e permite aproveitar o melhor dos dois mundos: componentização e renderização otimizada com estilização utilitária e rápida.

Criando um novo projeto Next.js

Se ainda não tiver um projeto Next criado:

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

Siga os prompts e escolha TypeScript ou JavaScript conforme a sua preferência.

Instalando o Tailwind CSS

Execute os comandos abaixo:

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

Isso criará os arquivos tailwind.config.js e postcss.config.js.

Configurando os arquivos

Edite tailwind.config.js e defina o caminho dos arquivos para scan:

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

No Next.js, os arquivos de entrada padrão são pages/ e components/.

Criando os estilos globais

No Next.js, o arquivo global de CSS fica em ./styles/globals.css. Edite o arquivo e insira as diretivas do Tailwind:

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

Garanta que ele está sendo importado no _app.js ou _app.tsx:

import '@/styles/globals.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Exemplo de uso no componente

export default function Home() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <div className="bg-white p-8 rounded shadow-md">
        <h1 className="text-2xl font-bold mb-4">Bem-vindo ao Next.js + Tailwind</h1>
        <p className="text-gray-600">Essa é sua primeira página estilizada.</p>
      </div>
    </div>
  );
}

Vantagens da integração

⚡️ SSR + CSS otimizado
O Tailwind funciona perfeitamente com a renderização do Next.js, e o CSS final é minificado com purge automático em produção.
🧩 Componentes reutilizáveis
A estrutura modular do Next com components/ facilita a criação de elementos estilizados reaproveitáveis.
🌙 Suporte nativo ao Dark Mode
A integração com Tailwind permite aplicar temas escuros com classes como dark:bg-gray-900.
🧠 Boas práticas com Headless UI ou Radix UI
Combina bem com bibliotecas acessíveis, mantendo o controle total do estilo.

Organizando os estilos com `@apply` (opcional)

Crie um arquivo com estilos utilitários aplicados:

/* styles/components.css */
.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded;
}

Importe no globals.css:

@import './components.css';

E use no componente:

<button className="btn-primary">Salvar</button>

Otimizando com `clsx` para classes condicionais

npm install clsx

import clsx from 'clsx'

export function Button({ active }) {
  return (
    <button
      className={clsx(
        'px-4 py-2 rounded',
        active ? 'bg-blue-600 text-white' : 'bg-gray-200 text-black'
      )}
    >
      Botão
    </button>
  );
}

Dica de produtividade

Instale a extensão do Tailwind CSS IntelliSense no VSCode para:

Sugestão automática de classes
Validação de erros
Navegação de documentação inline

Deploy com Tailwind no Vercel

Por ser da mesma equipe que mantém o Next.js, a Vercel é a escolha ideal para deploy.

Faça push no GitHub/GitLab/Bitbucket
Conecte com a Vercel
Deploy em segundos, com Tailwind + Next funcionando perfeitamente

O Tailwind CSS foi praticamente desenhado para funcionar com o ecossistema do Next.js. A produtividade dessa combinação é altíssima, e o resultado é um front-end limpo, moderno e extremamente performático.