Capítulo 291 de 456

CSS

Core Idea

Pages Router suporta várias formas de estilizar: Tailwind CSS, CSS Modules, Global CSS e stylesheets externos, cada uma com regra própria de importação e ordenação.

Key Concepts

  • Tailwind CSS: instalar tailwindcss + @tailwindcss/postcss, registrar plugin em postcss.config.mjs, @import 'tailwindcss' no CSS global, importar esse CSS em pages/_app.js.
  • CSS Modules: arquivo .module.css gera classes com escopo local (sem colisão de nomes); importado como objeto (styles.blog).
  • Global CSS: importado obrigatoriamente em pages/_app.js (não em outro lugar) pra aplicar a toda a aplicação.
  • External stylesheets: desde Next.js 9.5.4, CSS de node_modules pode ser importado em qualquer lugar; globais (bootstrap, nprogress) vão em _app.js, CSS de componente vai junto do componente.
  • Ordering and Merging: a ordem final do CSS segue a ordem de import no código, não a ordem de aparição do arquivo em disco; em produção o Next.js chunk/concatena e minifica automaticamente.

Code Examples

.blog {
  padding: 24px;
}

import styles from './blog.module.css'

export default function Page() {
  return <main className={styles.blog}></main>
}
  • O que demonstra: CSS Module isolado por componente, sem risco de colisão de nome de classe.

Reference Tables

RecursoOnde importar
TailwindCSS global, importado em _app.js
CSS ModulesDireto no componente (.module.css)
Global CSSSó em pages/_app.js
CSS de node_modules (global)pages/_app.js
CSS de node_modules (componente)No próprio arquivo do componente

Anti-patterns

  • Importar Global CSS fora de _app.js: gera erro/conflito; Next.js exige que estilos globais só entrem por ali.
  • Depender da ordem de arquivos em disco: a ordem real do CSS final segue a ordem dos imports no código, sempre validar com next build, pois dev e produção podem ordenar diferente.
  • Linter que reordena imports automaticamente: regras como sort-imports do ESLint quebram a ordenação intencional do CSS.

Key Takeaways

  1. Tailwind é a recomendação padrão pra maioria dos casos; CSS Modules cobre estilo específico de componente.
  2. Global CSS só pode ser importado em pages/_app.js.
  3. A ordem de import no código determina a ordem final do CSS, não a estrutura de pastas.
  4. Sempre validar ordenação de CSS rodando next build, não confiar só no next dev.

Connects To

  • ch317 PostCSS: configuração de plugin subjacente ao pipeline de CSS/Tailwind.
AnteriorFontsPróximoDeploying