Capítulo 325 de 456

Tailwind CSS

Core Idea

Guia de instalação do Tailwind CSS v3 no Pages Router (para Tailwind 4, ver o guia de setup do App Router).

Key Concepts

  • tailwindcss@^3 + postcss + autoprefixer: dependências instaladas junto com npx tailwindcss init -p.
  • tailwind.config.js → content: arrays de paths (pages, components, app) que o Tailwind varre para gerar classes usadas.
  • Diretivas @tailwind: base, components, utilities injetadas no CSS global.
  • Import do CSS global em pages/_app.js: ponto único de entrada dos estilos Tailwind.
  • Turbopack: suportado com Tailwind CSS e PostCSS desde Next.js 13.1.

Code Examples

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: { extend: {} },
  plugins: [],
}
  • O que demonstra: configuração mínima de content para o Tailwind detectar classes usadas no Pages Router.
@tailwind base;
@tailwind components;
@tailwind utilities;
  • O que demonstra: as três diretivas obrigatórias do Tailwind v3, importadas depois em _app.js via import '@/styles/globals.css'.

Anti-patterns

  • Seguir este guia esperando setup do Tailwind v4: este capítulo é especificamente v3; v4 tem instruções próprias no App Router.

Key Takeaways

  1. Fluxo de instalação: instalar pacotes → npx tailwindcss init -p → configurar content → adicionar diretivas → importar CSS em _app.js.
  2. Turbopack já suporta Tailwind/PostCSS nativamente desde a 13.1, sem configuração extra.

Connects To

  • Sass: alternativa/complemento de styling no Pages Router.
AnteriorStatic ExportsPróximoTesting