Capítulo 84 de 456

Tailwind CSS v3

Core Idea

Guia de instalação do Tailwind CSS v3 (legado) no Next.js, para casos que precisam de suporte a browsers mais antigos que o v4 não cobre. Para setup atual, use Tailwind v4 (guia de CSS do getting-started).

Key Concepts

  • tailwindcss@^3 + postcss + autoprefixer: dependências instaladas junto, diferente do v4 que dispensa PostCSS/autoprefixer manuais.
  • npx tailwindcss init -p: gera tailwind.config.js e postcss.config.js de uma vez.
  • content em tailwind.config.js: define os caminhos de template que o Tailwind varre para purgar classes não usadas.
  • Diretivas @tailwind: @tailwind base; @tailwind components; @tailwind utilities; no CSS global — sintaxe diferente do v4 (que usa @import "tailwindcss").
  • Suporte a Turbopack: Tailwind CSS + PostCSS suportados com Turbopack desde Next.js 13.1.

Code Examples

npm install -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p
  • O que demonstra: instalação completa do v3, incluindo geração dos arquivos de config.
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: { extend: {} },
  plugins: [],
}
  • O que demonstra: configuração de content cobrindo App Router, Pages Router e componentes.
@tailwind base;
@tailwind components;
@tailwind utilities;
  • O que demonstra: diretivas de importação do v3, que devem ser importadas no root layout via import './globals.css'.

Key Takeaways

  1. Tailwind v3 exige postcss.config.js e tailwind.config.js explícitos; v4 simplifica esse setup.
  2. content precisa cobrir todos os diretórios com JSX/TSX/MDX que usam classes Tailwind, senão o purge remove classes em uso.
  3. Turbopack já suporta essa configuração desde a v13.1 do Next.js.

Connects To

  • CSS / Tailwind v4 (getting-started): caminho recomendado por padrão; este capítulo é só para quem precisa do v3 por compatibilidade de browser.
AnteriorStreamingPróximoTesting