Organizando o HTML

Um dos principais questionamentos ao usar Tailwind CSS é: “meu HTML vai ficar poluído com muitas classes?”
A resposta é que sim, ele pode ficar visualmente mais extenso — mas isso não significa bagunça. Com boas práticas, o código continua organizado, legível e fácil de manter.

Essa página foca em estratégias práticas para manter o HTML bem estruturado, mesmo em projetos grandes com muitas utilitárias.

---

1. Agrupe por função visual (ordem lógica)

Ao aplicar várias classes, siga uma ordem funcional para facilitar a leitura:

Copy<!-- ERRADO: ordem caótica -->
<div class="text-white px-4 bg-blue-600 py-2 rounded font-bold hover:bg-blue-700">

<!-- CERTO: ordem lógica -->
<div class="bg-blue-600 hover:bg-blue-700 text-white font-bold px-4 py-2 rounded">

Ordem sugerida:

1. Layout (flex, grid, w-*, h-*, p-*, m-*)

2. Cores (bg-*, text-*, border-*)

3. Tipografia (font-*, text-*, tracking-*)

4. Estilo (rounded, shadow, ring, opacity)

5. Estados (hover:, focus:, disabled:)

---

2. Quebre em múltiplas linhas quando necessário

Para componentes maiores, não hesite em quebrar as classes por linha. Isso melhora a leitura e facilita a manutenção.

Copy<button
  class="
    bg-green-600
    hover:bg-green-700
    text-white
    font-semibold
    px-4
    py-2
    rounded
  "
>
  Confirmar
</button>

---

3. Use comentários para orientar blocos

Em estruturas mais complexas, adicionar comentários ajuda a entender cada parte:

Copy<section class="bg-white p-8 rounded shadow">
  <!-- Header -->
  <h2 class="text-2xl font-bold mb-4">Título</h2>

  <!-- Conteúdo -->
  <p class="text-gray-600 leading-relaxed">Texto explicativo.</p>

  <!-- Botão -->
  <button class="mt-6 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
    Ação
  </button>
</section>

---

4. Crie componentes para repetir padrões

Se você está usando o mesmo bloco com as mesmas classes em diversos lugares, transforme em componente.

• Em projetos HTML puros, use includes (parciais)

• Em React/Vue/etc., use componentes com props

• Ou use @apply para agrupar classes em estilos reutilizáveis

---

5. Evite sobrescrever com CSS externo desnecessariamente

Evite criar regras CSS separadas para “limpar” o HTML. Isso anula o benefício do Tailwind. Prefira manter as decisões visuais no markup.

---

6. Utilize o prettier-plugin-tailwindcss

Se você usa Prettier, esse plugin organiza automaticamente suas classes Tailwind em uma ordem consistente e legível.

Copynpm install -D prettier prettier-plugin-tailwindcss

---

7. Crie uma convenção de ordenação com a equipe

Em projetos em equipe, defina um padrão de ordenação e estrutura para as classes no HTML. Isso evita inconsistência e facilita o onboarding de novos devs.

---

Tailwind CSS pode parecer verboso à primeira vista, mas com essas práticas você mantém o HTML limpo, sustentável e fácil de evoluir — sem abrir mão da produtividade que o framework oferece.