Sistema de Layout do Tailwind CSS: Container, Posicionamento e Controle de Overflow

Q: P: Qual a diferença entre container e max-w-2xl?

R: container é responsivo e ajusta automaticamente sua largura máxima em diferentes breakpoints. max-w-2xl é uma largura máxima fixa de 672px. Se você precisa de uma largura fixa, esta última é mais apropriada.

Container

A classe Container cria um wrapper centralizado e responsivo que ajusta automaticamente sua largura máxima com base nos breakpoints.

Exemplo

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração do Container</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100">
  <!-- Container básico -->
  <div class="container mx-auto p-4">
    <div class="bg-white rounded-lg shadow p-6 mb-6">
      <h2 class="text-xl font-semibold mb-4">Container Básico</h2>
      <p class="text-gray-600">O container ajusta automaticamente sua largura máxima com base na largura da tela</p>
    </div>
  </div>

  <!-- Fundo em largura total + conteúdo contido -->
  <div class="bg-blue-600 py-12">
    <div class="container mx-auto px-4">
      <h2 class="text-2xl font-bold text-white mb-4">Fundo em Largura Total + Conteúdo Contido</h2>
      <p class="text-blue-100">O fundo se estende em largura total, o conteúdo permanece centralizado</p>
    </div>
  </div>

  <!-- Larguras do container em diferentes breakpoints -->
  <div class="container mx-auto p-4 mt-6">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Referência de Breakpoints do Container</h3>
      <div class="space-y-2 text-sm">
        <div class="flex justify-between border-b pb-2">
          <span class="text-gray-600">sm (≥640px)</span>
          <span class="font-mono">max-width: 640px</span>
        </div>
        <div class="flex justify-between border-b pb-2">
          <span class="text-gray-600">md (≥768px)</span>
          <span class="font-mono">max-width: 768px</span>
        </div>
        <div class="flex justify-between border-b pb-2">
          <span class="text-gray-600">lg (≥1024px)</span>
          <span class="font-mono">max-width: 1024px</span>
        </div>
        <div class="flex justify-between border-b pb-2">
          <span class="text-gray-600">xl (≥1280px)</span>
          <span class="font-mono">max-width: 1280px</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-600">2xl (≥1536px)</span>
          <span class="font-mono">max-width: 1536px</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Largura personalizada do container -->
  <div class="max-w-2xl mx-auto p-4 mt-6">
    <div class="bg-green-50 border border-green-200 rounded-lg p-6">
      <h3 class="font-semibold text-green-800 mb-2">Largura Máxima Personalizada</h3>
      <p class="text-green-600">Usando max-w-2xl (672px) em vez de container</p>
    </div>
  </div>
</body>
</html>

▶ Experimente

Referência de breakpoints do Container:

Breakpoint	Largura Mínima	Largura Máxima do Container
Padrão	-	100%
`sm`	640px	640px
`md`	768px	768px
`lg`	1024px	1024px
`xl`	1280px	1280px
`2xl`	1536px	1536px

CSS Tradicional vs Tailwind A abordagem tradicional requer definir manualmente max-width e media queries para containers responsivos, enquanto a classe container do Tailwind lida com todos os breakpoints automaticamente.

💡 Dica: container precisa de mx-auto para centralização horizontal. Você pode habilitar center: true na sua configuração para centralizar containers automaticamente.

Posição

O Tailwind fornece um sistema completo de posicionamento: static, relative, absolute, fixed, sticky.

Exemplo

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Posição</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- relative + absolute -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Posicionamento relative + absolute</h3>
      <div class="relative h-48 bg-gray-200 rounded">
        <div class="absolute top-4 left-4 bg-blue-500 text-white px-4 py-2 rounded">
          top-4 left-4
        </div>
        <div class="absolute top-4 right-4 bg-green-500 text-white px-4 py-2 rounded">
          top-4 right-4
        </div>
        <div class="absolute bottom-4 left-4 bg-purple-500 text-white px-4 py-2 rounded">
          bottom-4 left-4
        </div>
        <div class="absolute bottom-4 right-4 bg-orange-500 text-white px-4 py-2 rounded">
          bottom-4 right-4
        </div>
        <div class="absolute inset-0 flex items-center justify-center">
          <span class="bg-red-500 text-white px-4 py-2 rounded">inset-0 centralizado</span>
        </div>
      </div>
    </div>

    <!-- Posicionamento sticky -->
    <div class="bg-white rounded-lg shadow">
      <div class="sticky top-0 bg-blue-600 text-white p-4 rounded-t-lg z-10">
        <h3 class="font-semibold">Posicionamento Sticky - Role para baixo para ver o efeito</h3>
      </div>
      <div class="p-6 space-y-4">
        <p class="text-gray-600">Role para baixo e o cabeçalho ficará fixo no topo.</p>
        <div class="h-96 bg-gray-100 rounded flex items-center justify-center">
          <span class="text-gray-400">Área de rolagem</span>
        </div>
        <p class="text-gray-600">Continue rolando...</p>
        <div class="h-96 bg-gray-100 rounded flex items-center justify-center">
          <span class="text-gray-400">Mais conteúdo</span>
        </div>
      </div>
    </div>

    <!-- Exemplo de posicionamento fixed -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Posicionamento Fixed</h3>
      <p class="text-gray-600 mb-4">
        O posicionamento fixed é relativo ao viewport, comumente usado para barras de navegação, botões de voltar ao topo, etc.
        Código de exemplo:
      </p>
      <pre class="bg-gray-100 p-4 rounded text-sm">
&lt;nav class="fixed top-0 left-0 right-0 bg-white shadow"&gt;
  Barra de navegação fixa
&lt;/nav&gt;

&lt;button class="fixed bottom-8 right-8 bg-blue-500 text-white p-3 rounded-full"&gt;
  Voltar ao topo
&lt;/button&gt;</pre>
    </div>

    <!-- Propriedades de offset de posição -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Propriedades de Offset de Posição</h3>
      <div class="grid grid-cols-2 gap-4">
        <div class="bg-gray-100 p-4 rounded">
          <code class="text-sm">top-0</code>
          <span class="text-gray-500 text-sm ml-2">top: 0px</span>
        </div>
        <div class="bg-gray-100 p-4 rounded">
          <code class="text-sm">right-4</code>
          <span class="text-gray-500 text-sm ml-2">right: 16px</span>
        </div>
        <div class="bg-gray-100 p-4 rounded">
          <code class="text-sm">bottom-full</code>
          <span class="text-gray-500 text-sm ml-2">bottom: 100%</span>
        </div>
        <div class="bg-gray-100 p-4 rounded">
          <code class="text-sm">left-1/2</code>
          <span class="text-gray-500 text-sm ml-2">left: 50%</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ Experimente

Referência de classes de Posição:

Classe	Valor CSS	Descrição
`static`	`position: static`	Posicionamento padrão, sem offset
`relative`	`position: relative`	Posicionamento relativo, preserva o espaço original
`absolute`	`position: absolute`	Posicionamento absoluto, relativo ao ancestral posicionado mais próximo
`fixed`	`position: fixed`	Posicionamento fixo, relativo ao viewport
`sticky`	`position: sticky`	Posicionamento sticky, fixa ao rolar

CSS Tradicional vs Tailwind A abordagem tradicional requer definir position e valores de offset em CSS, enquanto o Tailwind usa classes como relative, top-4, left-4 para declará-las diretamente no HTML.

Ordem de Empilhamento Z-index

O Z-index controla a ordem de empilhamento dos elementos posicionados, determinando quais elementos aparecem na frente.

Exemplo

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração da Ordem de Empilhamento Z-index</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Exemplo de empilhamento -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Efeito de Empilhamento Z-index</h3>
      <div class="relative h-64">
        <div class="absolute left-8 top-8 w-48 h-32 bg-red-400 rounded-lg shadow-lg z-10 flex items-center justify-center">
          <span class="text-white font-bold">z-10</span>
        </div>
        <div class="absolute left-16 top-16 w-48 h-32 bg-blue-400 rounded-lg shadow-lg z-20 flex items-center justify-center">
          <span class="text-white font-bold">z-20</span>
        </div>
        <div class="absolute left-24 top-24 w-48 h-32 bg-green-400 rounded-lg shadow-lg z-30 flex items-center justify-center">
          <span class="text-white font-bold">z-30</span>
        </div>
        <div class="absolute left-32 top-32 w-48 h-32 bg-purple-400 rounded-lg shadow-lg z-40 flex items-center justify-center">
          <span class="text-white font-bold">z-40</span>
        </div>
      </div>
    </div>

    <!-- Aplicações práticas -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Casos de Uso Práticos</h3>
      <div class="space-y-4">
        <div class="flex items-center gap-4">
          <code class="w-24">z-0</code>
          <span class="text-gray-600">Camada padrão</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-10</code>
          <span class="text-gray-600">Cards, áreas de conteúdo</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-20</code>
          <span class="text-gray-600">Dropdowns, barras laterais</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-30</code>
          <span class="text-gray-600">Barras de navegação sticky</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-40</code>
          <span class="text-gray-600">Overlays de modal</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-50</code>
          <span class="text-gray-600">Modais, popups</span>
        </div>
      </div>
    </div>

    <!-- Z-index negativo -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Z-index Negativo</h3>
      <div class="relative h-32">
        <div class="absolute inset-0 bg-blue-100 rounded flex items-center justify-center">
          <span class="text-blue-600">Camada de fundo z-0</span>
        </div>
        <div class="absolute left-4 top-4 w-32 h-24 bg-red-400 rounded -z-10 flex items-center justify-center">
          <span class="text-white">-z-10</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional requer definir valores específicos de z-index em CSS, enquanto o Tailwind fornece níveis predefinidos de z-0 a z-50 que cobrem a maioria dos casos de uso.

⚠️ Nota: o z-index afeta apenas elementos posicionados (relative, absolute, fixed, sticky). Use z-auto para redefinir o comportamento padrão.

Controle de Overflow

O Overflow controla como o conteúdo é exibido quando excede seu contêiner.

Exemplo

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Controle de Overflow</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- overflow-auto -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">overflow-auto</h3>
      <p class="text-gray-600 mb-4">Mostra barras de rolagem quando o conteúdo transborda</p>
      <div class="overflow-auto h-40 border-2 border-gray-300 rounded p-4">
        <p class="mb-4">Este é um conteúdo longo...</p>
        <p class="mb-4">Demonstrando o efeito do overflow-auto.</p>
        <p class="mb-4">Quando o conteúdo excede a altura do contêiner, as barras de rolagem aparecem automaticamente.</p>
        <p class="mb-4">Os usuários podem rolar para ver todo o conteúdo.</p>
        <p class="mb-4">Adicionando mais conteúdo...</p>
        <p class="mb-4">Ainda mais conteúdo de texto.</p>
        <p>Último parágrafo do conteúdo.</p>
      </div>
    </div>

    <!-- overflow-hidden -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">overflow-hidden</h3>
      <p class="text-gray-600 mb-4">Oculta o conteúdo que transborda</p>
      <div class="overflow-hidden h-40 border-2 border-gray-300 rounded p-4">
        <p class="mb-4">Este é um conteúdo longo...</p>
        <p class="mb-4">Demonstrando o efeito do overflow-hidden.</p>
        <p class="mb-4">O conteúdo que excede o contêiner é ocultado.</p>
        <p class="mb-4">Os usuários não podem rolar para ver o conteúdo oculto.</p>
        <p class="mb-4">Este conteúdo é invisível...</p>
        <p class="mb-4">Este também é invisível...</p>
        <p>Este também é invisível...</p>
      </div>
    </div>

    <!-- overflow-scroll -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">overflow-scroll</h3>
      <p class="text-gray-600 mb-4">Sempre mostra barras de rolagem</p>
      <div class="overflow-scroll h-40 border-2 border-gray-300 rounded p-4">
        <p class="mb-4">Este conteúdo é curto...</p>
        <p>Mas as barras de rolagem ainda estão visíveis.</p>
      </div>
    </div>

    <!-- Overflow horizontal -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Controle de Overflow Horizontal</h3>
      <div class="space-y-4">
        <div>
          <p class="text-sm text-gray-600 mb-2">overflow-x-auto (rolagem horizontal)</p>
          <div class="overflow-x-auto border-2 border-gray-300 rounded p-4">
            <div class="flex gap-4 w-[800px]">
              <div class="bg-blue-200 p-4 rounded flex-shrink-0 w-48">Item 1</div>
              <div class="bg-blue-300 p-4 rounded flex-shrink-0 w-48">Item 2</div>
              <div class="bg-blue-400 p-4 rounded flex-shrink-0 w-48 text-white">Item 3</div>
              <div class="bg-blue-500 p-4 rounded flex-shrink-0 w-48 text-white">Item 4</div>
            </div>
          </div>
        </div>

        <div>
          <p class="text-sm text-gray-600 mb-2">overflow-x-hidden (oculta overflow horizontal)</p>
          <div class="overflow-x-hidden border-2 border-gray-300 rounded p-4">
            <div class="flex gap-4 w-[800px]">
              <div class="bg-green-200 p-4 rounded flex-shrink-0 w-48">Item 1</div>
              <div class="bg-green-300 p-4 rounded flex-shrink-0 w-48">Item 2</div>
              <div class="bg-green-400 p-4 rounded flex-shrink-0 w-48 text-white">Item 3</div>
              <div class="bg-green-500 p-4 rounded flex-shrink-0 w-48 text-white">Item 4</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- text-overflow -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Overflow de Texto</h3>
      <div class="space-y-4">
        <div>
          <p class="text-sm text-gray-600 mb-2">truncate (reticências em linha única)</p>
          <p class="truncate bg-gray-100 p-3 rounded">
            Este é um conteúdo de texto longo. A classe truncate mostra reticências quando o texto de linha única transborda, ocultando o conteúdo além da largura do contêiner com ...
          </p>
        </div>
        <div>
          <p class="text-sm text-gray-600 mb-2">text-ellipsis + overflow-hidden</p>
          <p class="text-ellipsis overflow-hidden whitespace-nowrap bg-gray-100 p-3 rounded">
            Esta é outra forma de alcançar reticências,requerendo a combinação de text-ellipsis, overflow-hidden e whitespace-nowrap
          </p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ Experimente

Referência de classes de Overflow:

Classe	Valor CSS	Descrição
`overflow-auto`	`overflow: auto`	Mostra barras de rolagem quando necessário
`overflow-hidden`	`overflow: hidden`	Oculta conteúdo que transborda
`overflow-visible`	`overflow: visible`	Mostra conteúdo que transborda (padrão)
`overflow-scroll`	`overflow: scroll`	Sempre mostra barras de rolagem
`overflow-x-auto`	`overflow-x: auto`	Rolagem horizontal automática
`overflow-y-auto`	`overflow-y: auto`	Rolagem vertical automática

CSS Tradicional vs Tailwind A abordagem tradicional requer definir as propriedades overflow-x e overflow-y separadamente para diferentes direções, enquanto o Tailwind fornece um prefixo unificado overflow-.

Float & Clear

O Float é usado para layout de elementos flutuantes, e o Clear controla o comportamento da flutuação.

Exemplo

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Float</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Float básico -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Float Básico</h3>
      <div class="bg-gray-100 p-4 rounded">
        <div class="float-left w-32 h-32 bg-blue-400 rounded m-4 flex items-center justify-center">
          <span class="text-white">float-left</span>
        </div>
        <p class="text-gray-700 leading-relaxed">
          Este texto envolve o elemento flutuante. float-left faz o elemento flutuar para a esquerda,
          e o conteúdo subsequente flui ao seu redor. Este é o efeito clássico de texto ao redor de imagem.
          Adicionando mais texto para demonstrar o efeito de envolvimento...
        </p>
      </div>
    </div>

    <!-- Float à direita -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Float à Direita</h3>
      <div class="bg-gray-100 p-4 rounded">
        <div class="float-right w-32 h-32 bg-green-400 rounded m-4 flex items-center justify-center">
          <span class="text-white">float-right</span>
        </div>
        <p class="text-gray-700 leading-relaxed">
          float-right faz o elemento flutuar para a direita. O texto envolve o elemento flutuante pela esquerda.
          Este padrão de layout era comum no design web tradicional, mas Flexbox ou Grid são agora preferidos.
          Adicionando mais texto para demonstrar o efeito de envolvimento...
        </p>
      </div>
    </div>

    <!-- Controle Clear -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Controle Clear</h3>
      <div class="bg-gray-100 p-4 rounded">
        <div class="float-left w-24 h-24 bg-blue-400 rounded m-2 flex items-center justify-center">
          <span class="text-white text-sm">Float</span>
        </div>
        <div class="float-left w-24 h-24 bg-blue-500 rounded m-2 flex items-center justify-center">
          <span class="text-white text-sm">Float</span>
        </div>
        <div class="clear-both bg-yellow-200 p-4 rounded mt-4">
          <p>clear-both: limpa floats em ambos os lados, garantindo que este inicie em uma nova linha</p>
        </div>
      </div>
    </div>

    <!-- Clearfix -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Clearfix (Limpando Floats)</h3>
      <div class="bg-gray-100 p-4 rounded overflow-hidden">
        <div class="float-left w-32 h-32 bg-purple-400 rounded m-4 flex items-center justify-center">
          <span class="text-white">Elemento flutuante</span>
        </div>
        <div class="float-right w-32 h-32 bg-purple-500 rounded m-4 flex items-center justify-center">
          <span class="text-white">Elemento flutuante</span>
        </div>
        <p class="text-gray-600">
          Usando overflow-hidden no elemento pai para limpar floats
        </p>
      </div>
    </div>

    <!-- Alternativa moderna -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Alternativa Moderna (Recomendado)</h3>
      <p class="text-gray-600 mb-4">
        Para necessidades de layout, Flexbox ou Grid é recomendado em vez de Float:
      </p>
      <div class="flex gap-4">
        <div class="w-32 h-32 bg-blue-400 rounded flex items-center justify-center">
          <span class="text-white">Flex 1</span>
        </div>
        <div class="w-32 h-32 bg-blue-500 rounded flex items-center justify-center">
          <span class="text-white">Flex 2</span>
        </div>
        <div class="w-32 h-32 bg-blue-600 rounded flex items-center justify-center">
          <span class="text-white">Flex 3</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ Experimente

Referência de classes Float/Clear:

Classe	Valor CSS	Descrição
`float-left`	`float: left`	Flutua para a esquerda
`float-right`	`float: right`	Flutua para a direita
`float-none`	`float: none`	Sem float
`clear-left`	`clear: left`	Limpa float à esquerda
`clear-right`	`clear: right`	Limpa float à direita
`clear-both`	`clear: both`	Limpa floats em ambos os lados
`clear-none`	`clear: none`	Sem clear

CSS Tradicional vs Tailwind A abordagem tradicional requer escrever uma classe .clearfix com um pseudo-elemento ::after, enquanto o Tailwind pode limpar floats diretamente usando overflow-hidden no elemento pai.

⚠️ Nota: O layout com Float foi amplamente substituído por Flexbox e Grid. O Float é agora usado principalmente para cenários específicos como envolver texto ao redor de imagens.

Exemplo de Layout Abrangente

Combinando todos os conceitos acima, vamos criar um layout de página completo.

Exemplo

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo de Layout Abrangente</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100">
  <!-- Barra de navegação fixa -->
  <nav class="fixed top-0 left-0 right-0 bg-white shadow-md z-50">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
      <h1 class="text-xl font-bold text-gray-800">Meu Site</h1>
      <div class="space-x-4">
        <a href="#" class="text-gray-600 hover:text-blue-600">Início</a>
        <a href="#" class="text-gray-600 hover:text-blue-600">Sobre</a>
        <a href="#" class="text-gray-600 hover:text-blue-600">Contato</a>
      </div>
    </div>
  </nav>

  <!-- Área de conteúdo principal -->
  <div class="pt-16">
    <!-- Seção hero -->
    <div class="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
      <div class="container mx-auto px-4 text-center">
        <h2 class="text-4xl font-bold mb-4">Bem-vindo ao Meu Site</h2>
        <p class="text-xl opacity-90">Um layout moderno construído com Tailwind CSS</p>
      </div>
    </div>

    <!-- Cards de conteúdo -->
    <div class="container mx-auto px-4 py-12">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
          <div class="h-48 bg-gradient-to-br from-blue-400 to-blue-600"></div>
          <div class="p-6">
            <h3 class="text-lg font-semibold mb-2">Título do Card</h3>
            <p class="text-gray-600 text-sm">Descrição do card...</p>
          </div>
        </div>
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
          <div class="h-48 bg-gradient-to-br from-green-400 to-green-600"></div>
          <div class="p-6">
            <h3 class="text-lg font-semibold mb-2">Título do Card</h3>
            <p class="text-gray-600 text-sm">Descrição do card...</p>
          </div>
        </div>
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
          <div class="h-48 bg-gradient-to-br from-purple-400 to-purple-600"></div>
          <div class="p-6">
            <h3 class="text-lg font-semibold mb-2">Título do Card</h3>
            <p class="text-gray-600 text-sm">Descrição do card...</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Layout com sidebar sticky -->
    <div class="container mx-auto px-4 pb-12">
      <div class="flex flex-col lg:flex-row gap-6">
        <!-- Conteúdo principal -->
        <div class="flex-1 bg-white rounded-lg shadow p-6">
          <h3 class="text-xl font-semibold mb-4">Área de Conteúdo Principal</h3>
          <div class="space-y-4">
            <p class="text-gray-600">Esta é a área de conteúdo principal, ocupando a maior parte do espaço.</p>
            <div class="h-96 bg-gray-100 rounded"></div>
          </div>
        </div>
        
        <!-- Sidebar -->
        <aside class="lg:w-64 lg:sticky lg:top-20 lg:self-start">
          <div class="bg-white rounded-lg shadow p-6">
            <h4 class="font-semibold mb-4">Barra Lateral</h4>
            <p class="text-gray-600 text-sm">Usa posicionamento sticky para permanecer fixa no topo durante a rolagem.</p>
          </div>
        </aside>
      </div>
    </div>
  </div>

  <!-- Botão voltar ao topo -->
  <button class="fixed bottom-8 right-8 bg-blue-600 text-white w-12 h-12 rounded-full shadow-lg hover:bg-blue-700 transition-colors z-40">
    ↑
  </button>
</body>
</html>

▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional requer escrever CSS extenso para navegação fixa, grades responsivas, barras laterais sticky e outros layouts, enquanto o Tailwind realiza tudo com classes utilitárias diretamente no HTML, reduzindo o código em mais de 70%.

❓ Perguntas Frequentes

P: Qual a diferença entre container e max-w-2xl? R: container é responsivo e ajusta automaticamente sua largura máxima em diferentes breakpoints. max-w-2xl é uma largura máxima fixa de 672px. Se você precisa de uma largura fixa, esta última é mais apropriada.

P: Por que o posicionamento sticky não está funcionando? R: Sticky requer que o elemento pai tenha uma altura definida e permita rolagem. Um problema comum é o elemento pai ter overflow: hidden, o que impede o sticky de funcionar. Certifique-se de que o pai não restrinja o overflow.

P: Quando devo usar overflow-hidden para limpar floats? R: Use-o quando um elemento pai contém filhos flutuantes e você precisa que a altura do pai englobe seus filhos. Para layouts modernos, Flexbox ou Grid é recomendado em vez de Float.

P: Qual é a convenção para valores de z-index? R: O Tailwind fornece z-0 a z-50. Um esquema de camadas recomendado: z-10 conteúdo, z-20 navegação, z-30 nav sticky, z-40 overlays, z-50 modais. Evite usar valores excessivamente grandes.

📖 Resumo

A classe Container cria um wrapper centralizado e responsivo, usando mx-auto para centralização horizontal
O sistema de Posição inclui cinco modos de posicionamento: static, relative, absolute, fixed e sticky
O Z-index varia de z-0 a z-50, controlando a ordem de empilhamento dos elementos posicionados
O Overflow controla o comportamento de transbordo do conteúdo; overflow-hidden também pode limpar floats
O Float é usado para layouts de envolvimento de texto; Flexbox ou Grid é recomendado para layouts modernos
Combinar essas ferramentas de layout permite a construção de páginas responsivas complexas

📝 Exercícios

⭐ Crie uma página centralizada usando container e mx-auto com um layout de grade de cards de largura fixa
⭐⭐ Crie uma página com layout de duas colunas com uma barra de navegação fixa (fixed) e uma barra lateral sticky (sticky)
⭐⭐⭐ Crie um componente Modal completo usando posicionamento fixed, nível de empilhamento z-50, overlay de fundo overflow-hidden, com adaptação responsiva