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 #

<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:

| Breakpoint | Classe prefixo | Largura máxima | | ---------- | -------------- | -------------- | | sm | sm: | 640px | | md | md: | 768px | | lg | lg: | 1024px | | xl | xl: | 1280px | | 2xl | 2xl: | 1536px |

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:

module.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.