1) Configuração e build: fundamentos que evitam desperdício de CSS

Nossa base de código depende de uma configuração clara. Erros frequentes geram artefatos desnecessários e dificuldade de manutenção.

• Não ajustar o content (ou purge) no Tailwind 2.x/3.x. Sem esse filtro, classes não utilizadas permanecem no CSS final.
• Uso inconsistente de darkMode. Preferir darkMode: ‘class’ para controle via estado da aplicação, em vez de depender de preferências do usuário.
• Ignorar o modo JIT ou dependência de bundler. Tailwind v3 já vem com JIT por padrão; garanta que o bundler esteja configurado para recompilar diante de mudanças de utilitários.
• Não aproveitar o container e larguras permanecendo fixos. Planeje larguras máximas com container e margens automáticas para consistência visual.

Exemplo mínimo de tailwind.config.js com conteúdo explícito e dark mode:

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  darkMode: 'class', // ou 'media', use o que melhor se encaixa no projeto
  theme: {
    extend: {
      // extensões de tema quando necessário
    }
  },
  plugins: [],
}

2) Composição de estilos: quando usar @apply e componentes para evitar caos de utilitários

Tailwind facilita a composição de estilos por meio de classes utilitárias, mas abusar da cadeia infinita de classes pode tornar o código difícil de manter. A estratégia correta é criar componentes reutilizáveis com CSS dedicado quando apropriado.

• Defina componentes básicos com @apply para manter consistência (ex.: botões, campos, cards).
• Use camadas (@layer) para isolar componentes, evitando spill de utilitários no restante da base.
• Equilibre entre utilitários diretos e componentes para manter rapidez de prototipação sem sacrificar manutenibilidade.

// styles/components.css
.btn {
  @apply inline-flex items-center px-4 py-2 rounded-md bg-indigo-600 text-white;
}
.btn:hover {
  @apply bg-indigo-700;
}
.btn:focus-visible {
  @apply ring-2 ring-offset-2 ring-indigo-500;
}

Com esse approach, você mantém a velocidade do Tailwind para prototipagem e ganha organização para evoluir o design system conforme o projeto cresce.

3) Responsividade e escalabilidade: planejamento de breakpoints sem maquiagem falsa

Um erro comum é tratar breakpoints como uma camada opcional. A responsividade deve guiar a arquitetura de componentes, não apenas adaptá-la no final.

• Prefira container + mx-auto para centralizar conteúdos, em vez de margens fixas em tudo.
• Use grid e flex com breakpoints claros (ex.: grid-cols-1, md:grid-cols-2, lg:grid-cols-4) para estruturar conteúdos consistentes.
• Evite fixar larguras com px onde o conteúdo é dinâmico; combine com min/max width e use espaço com gap.

Exemplo rápido de grade responsiva simples:

<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <article>Card 1</article>
  <article>Card 2</article>
  <article>Card 3</article>
  <article>Card 4</article>
</section>

4) Acessibilidade, desempenho e boas práticas

Interfaces úteis devem ser utilizáveis por todos. Além disso, desempenho está ligado à qualidade da base de CSS gerada.

• Inclua estados de foco visíveis (focus-visible) e use rings para acessibilidade sem perder a estética.
• Utilize elementos semânticos adequados (button, nav, header) e forneça labels acessíveis para ícones ou botões apenas com imagem/ícone.
• Atenção a animações: respeite prefers-reduced-motion, aplicando utilitários de motion com cuidado.
• Teste legibilidade com contrastes apropriados entre fundo e texto.

Boas práticas rápidas:

• Substitua controles de formulário sem estilo por componentes Tailwind com rótulos claros.
• Evite dependência exclusiva de tamanho de fonte para leitura; ajuste com spacing responsivo, não apenas com font-size.
• Verifique se o CSS gerado não excede o necessário para a página (purge/configção adequada).