English 中文 العربية 日本語 Português

Tailwind CSS: Sistema de Layout do Tailwind CSS

1. Container

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

▶ Exemplo

HTML 📖 Somente leitura 
<!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>
56 linhas de lógica (limite de 40, somente leitura)

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.

2. Posição

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

▶ Exemplo

HTML 📖 Somente leitura 
<!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>
83 linhas de lógica (limite de 40, somente leitura)

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.

3. Ordem de Empilhamento Z-index

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

▶ Exemplo

HTML 📖 Somente leitura 
<!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>
70 linhas de lógica (limite de 40, somente leitura)

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.

4. Controle de Overflow

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

▶ Exemplo

HTML 📖 Somente leitura 
<!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>
91 linhas de lógica (limite de 40, somente leitura)

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

5. Float & Clear

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

▶ Exemplo

HTML 📖 Somente leitura 
<!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>
84 linhas de lógica (limite de 40, somente leitura)

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 📖 Somente leitura 
<!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>
74 linhas de lógica (limite de 40, somente leitura)

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

📝 Exercícios

  1. ⭐ Crie uma página centralizada usando container e mx-auto com um layout de grade de cards de largura fixa

  2. ⭐⭐ Crie uma página com layout de duas colunas com uma barra de navegação fixa (fixed) e uma barra lateral sticky (sticky)

  3. ⭐⭐⭐ Crie um componente Modal completo usando posicionamento fixed, nível de empilhamento z-50, overlay de fundo overflow-hidden, com adaptação responsiva

Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%