Container

A classe container do Tailwind CSS é utilizada para criar um contêiner com largura máxima centralizada, que se adapta automaticamente a diferentes larguras de tela com base nos breakpoints definidos no tema.

É ideal para estruturar o conteúdo principal da página, garantindo que ele permaneça centralizado e com espaçamento adequado nas laterais.

---

Como usar

Copy<div class="container mx-auto px-4">
  <h1 class="text-2xl font-bold">Conteúdo Centralizado</h1>
  <p class="text-gray-600">O container ajusta a largura automaticamente com base no tamanho da tela.</p>
</div>

Explicação:

• container: ativa o comportamento responsivo da largura.

• mx-auto: centraliza horizontalmente.

• px-4: adiciona padding horizontal.

---

Larguras por breakpoint (padrão)

O Tailwind aplica larguras máximas automáticas ao container conforme o breakpoint:

Esses valores podem ser ajustados no tailwind.config.js, caso seu projeto exija larguras personalizadas.

---

Personalizando o container

Você pode sobrescrever o comportamento padrão no seu tailwind.config.js:

Copymodule.exports = {
  theme: {
    container: {
      center: true,
      padding: '1rem',
      screens: {
        sm: '600px',
        md: '728px',
        lg: '984px',
        xl: '1240px',
      },
    },
  },
}

Neste exemplo:

• center: true: ativa margin: auto automaticamente.

• padding: define o padding horizontal.

• screens: define as larguras máximas por breakpoint.

---

Container vs largura manual

Você também pode controlar a largura com classes como max-w-4xl, w-full, etc. Mas o container é útil quando você quer aplicar uma largura padrão de forma consistente sem declarar max-w-* em todo lugar.

---

Boas práticas

• Use container para delimitar a largura de seções principais.

• Combine com mx-auto e px-* para garantir espaçamento interno e centralização.

• Evite aninhar vários containers — geralmente um por página é suficiente.