EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Tailwind CSS Fundos e Bordas: Cores, Gradientes, Border Radius e Controle de Bordas

Cor de Fundo (bg-*)

As classes bg-* definem a cor de fundo de um elemento, suportando um rico conjunto de cores predefinidas e opacidade.

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 Cor de Fundo</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">
    <!-- Cores básicas -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Cores de Fundo Básicas</h3>
      <div class="grid grid-cols-4 gap-4">
        <div class="bg-red-500 text-white p-4 rounded text-center">red-500</div>
        <div class="bg-blue-500 text-white p-4 rounded text-center">blue-500</div>
        <div class="bg-green-500 text-white p-4 rounded text-center">green-500</div>
        <div class="bg-yellow-500 text-white p-4 rounded text-center">yellow-500</div>
        <div class="bg-purple-500 text-white p-4 rounded text-center">purple-500</div>
        <div class="bg-pink-500 text-white p-4 rounded text-center">pink-500</div>
        <div class="bg-indigo-500 text-white p-4 rounded text-center">indigo-500</div>
        <div class="bg-gray-500 text-white p-4 rounded text-center">gray-500</div>
      </div>
    </div>

    <!-- Tons de cores -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Tons de Cores (50-950)</h3>
      <div class="space-y-2">
        <div class="bg-blue-50 text-blue-900 p-3 rounded">blue-50</div>
        <div class="bg-blue-100 text-blue-900 p-3 rounded">blue-100</div>
        <div class="bg-blue-200 text-blue-900 p-3 rounded">blue-200</div>
        <div class="bg-blue-300 text-blue-900 p-3 rounded">blue-300</div>
        <div class="bg-blue-400 text-white p-3 rounded">blue-400</div>
        <div class="bg-blue-500 text-white p-3 rounded">blue-500</div>
        <div class="bg-blue-600 text-white p-3 rounded">blue-600</div>
        <div class="bg-blue-700 text-white p-3 rounded">blue-700</div>
        <div class="bg-blue-800 text-white p-3 rounded">blue-800</div>
        <div class="bg-blue-900 text-white p-3 rounded">blue-900</div>
        <div class="bg-blue-950 text-white p-3 rounded">blue-950</div>
      </div>
    </div>

    <!-- Opacidade -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Opacidade do Fundo</h3>
      <div class="grid grid-cols-4 gap-4">
        <div class="bg-blue-500/100 text-blue-900 p-4 rounded text-center">/100</div>
        <div class="bg-blue-500/75 text-blue-900 p-4 rounded text-center">/75</div>
        <div class="bg-blue-500/50 text-blue-900 p-4 rounded text-center">/50</div>
        <div class="bg-blue-500/25 text-blue-900 p-4 rounded text-center">/25</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência de classes de cor de fundo:

Classe Valor CSS Descrição
bg-red-500 background-color: #ef4444 Fundo vermelho
bg-blue-500 background-color: #3b82f6 Fundo azul
bg-transparent background-color: transparent Fundo transparente
bg-current background-color: currentColor Cor do texto atual
bg-white background-color: #fff Fundo branco
bg-black background-color: #000 Fundo preto
bg-blue-500/50 background-color: rgb(59 130 246 / 0.5) Azul com 50% de opacidade

CSS Tradicional vs Tailwind A abordagem tradicional requer definir background-color no CSS e lembrar valores hexadecimais, enquanto o Tailwind usa nomes de classes semânticos como bg-blue-500 para declaração direta. A sintaxe /50 suporta controle de opacidade.

💡 Dica: Os tons de cores variam de 50 (mais claro) a 950 (mais escuro), sendo 500 o tom padrão. Use a sintaxe /opacity para ajustar rapidamente a transparência.

Fundos com Gradiente (bg-gradient-*)

Fundos com gradiente usam bg-gradient-to-* para definir a direção, combinados com from-*, via-* e to-* para definir as cores.

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 Gradiente de Fundo</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">
    <!-- Direções de gradiente linear -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Direções de Gradiente Linear</h3>
      <div class="grid grid-cols-2 gap-4">
        <div class="bg-gradient-to-r from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-r (direita)</div>
        <div class="bg-gradient-to-l from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-l (esquerda)</div>
        <div class="bg-gradient-to-b from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-b (para baixo)</div>
        <div class="bg-gradient-to-t from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-t (para cima)</div>
        <div class="bg-gradient-to-br from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-br (inferior direito)</div>
        <div class="bg-gradient-to-bl from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-bl (inferior esquerdo)</div>
        <div class="bg-gradient-to-tr from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-tr (superior direito)</div>
        <div class="bg-gradient-to-tl from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-tl (superior esquerdo)</div>
      </div>
    </div>

    <!-- Gradientes de três cores -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Gradientes de Três Cores (from-via-to)</h3>
      <div class="space-y-4">
        <div class="bg-gradient-to-r from-blue-500 via-green-500 to-purple-500 text-white p-6 rounded text-center">Azul → Verde → Roxo</div>
        <div class="bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 text-white p-6 rounded text-center">Vermelho → Amarelo → Verde</div>
        <div class="bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 text-white p-6 rounded text-center">Rosa → Roxo → Índigo</div>
      </div>
    </div>

    <!-- Exemplos práticos -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Exemplos Práticos</h3>
      <div class="space-y-4">
        <!-- Botão com gradiente -->
        <button class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all">
          Botão com Gradiente
        </button>
        <!-- Card com gradiente -->
        <div class="bg-gradient-to-br from-cyan-500 to-blue-600 text-white p-6 rounded-lg">
          <h4 class="text-xl font-bold mb-2">Card com Gradiente</h4>
          <p class="opacity-90">Use fundos com gradiente para criar apelo visual</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência de classes de gradiente:

Classe Valor CSS Descrição
bg-gradient-to-r background-image: linear-gradient(to right, ...) Gradiente para a direita
bg-gradient-to-l background-image: linear-gradient(to left, ...) Gradiente para a esquerda
bg-gradient-to-b background-image: linear-gradient(to bottom, ...) Gradiente para baixo
bg-gradient-to-t background-image: linear-gradient(to top, ...) Gradiente para cima
from-blue-500 --tw-gradient-from: #3b82f6 Cor inicial
via-green-500 --tw-gradient-via: #22c55e Cor intermediária
to-purple-500 --tw-gradient-to: #a855f7 Cor final

CSS Tradicional vs Tailwind A abordagem tradicional requer escrever background-image: linear-gradient(to right, #3b82f6, #a855f7) no CSS, enquanto o Tailwind usa nomes de classes como bg-gradient-to-r from-blue-500 to-purple-500 para declaração direta.

💡 Dica: via-* é uma cor intermediária opcional. Sem via-*, o gradiente faz a transição diretamente de from-* para to-*.

Imagens de Fundo (bg-*)

As classes de imagem de fundo usam bg-* para definir o caminho da imagem, tamanho e posiçã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 Imagem de Fundo</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">
    <!-- Dimensionamento da imagem de fundo -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Dimensionamento da Imagem de Fundo</h3>
      <div class="grid grid-cols-2 gap-4">
        <div class="h-48 bg-cover bg-center rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded">bg-cover</div>
        </div>
        <div class="h-48 bg-contain bg-center bg-no-repeat rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded">bg-contain</div>
        </div>
      </div>
    </div>

    <!-- Posição da imagem de fundo -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Posição da Imagem de Fundo</h3>
      <div class="grid grid-cols-3 gap-4">
        <div class="h-32 bg-cover bg-top rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded text-sm">bg-top</div>
        </div>
        <div class="h-32 bg-cover bg-center rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded text-sm">bg-center</div>
        </div>
        <div class="h-32 bg-cover bg-bottom rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded text-sm">bg-bottom</div>
        </div>
      </div>
    </div>

    <!-- Seção hero -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Exemplo de Seção Hero</h3>
      <div class="h-64 bg-cover bg-center rounded-lg relative" style="background-image: url('https://picsum.photos/800/400')">
        <div class="absolute inset-0 bg-gradient-to-r from-blue-600/80 to-purple-600/80 rounded-lg"></div>
        <div class="relative h-full flex flex-col items-center justify-center text-white">
          <h2 class="text-3xl font-bold mb-4">Bem-vindo ao Nosso Site</h2>
          <p class="text-lg opacity-90">Crie belos efeitos de fundo com Tailwind CSS</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência de classes de imagem de fundo:

Classe Valor CSS Descrição
bg-cover background-size: cover Cobrir o contêiner
bg-contain background-size: contain Ajustar ao contêiner
bg-auto background-size: auto Tamanho original
bg-center background-position: center Centralizado
bg-top background-position: top Alinhado ao topo
bg-bottom background-position: bottom Alinhado à base
bg-no-repeat background-repeat: no-repeat Sem repetição
bg-repeat background-repeat: repeat Repetir (padrão)

CSS Tradicional vs Tailwind A abordagem tradicional requer definir múltiplas propriedades como background-size, background-position e background-repeat no CSS, enquanto o Tailwind usa nomes de classes como bg-cover, bg-center e bg-no-repeat para declaração direta.

💡 Dica: Use bg-gradient-to-r from-blue-600/80 to-purple-600/80 para sobrepor uma máscara de gradiente em imagens de fundo, melhorando a legibilidade do texto.

Border Radius (rounded-*)

As classes rounded-* definem o border radius (arredondamento) de um elemento.

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 Border Radius</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">
    <!-- Border radius básico -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Border Radius Básico</h3>
      <div class="flex flex-wrap gap-4 items-end">
        <div class="w-24 h-24 bg-blue-500 rounded-none flex items-center justify-center text-white text-xs">rounded-none</div>
        <div class="w-24 h-24 bg-blue-500 rounded-sm flex items-center justify-center text-white text-xs">rounded-sm</div>
        <div class="w-24 h-24 bg-blue-500 rounded flex items-center justify-center text-white text-xs">rounded</div>
        <div class="w-24 h-24 bg-blue-500 rounded-md flex items-center justify-center text-white text-xs">rounded-md</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg flex items-center justify-center text-white text-xs">rounded-lg</div>
        <div class="w-24 h-24 bg-blue-500 rounded-xl flex items-center justify-center text-white text-xs">rounded-xl</div>
        <div class="w-24 h-24 bg-blue-500 rounded-2xl flex items-center justify-center text-white text-xs">rounded-2xl</div>
        <div class="w-24 h-24 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs">rounded-full</div>
      </div>
    </div>

    <!-- Border radius por lado -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Border Radius por Lado</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-green-500 rounded-t-lg flex items-center justify-center text-white text-sm">rounded-t-lg</div>
        <div class="w-32 h-24 bg-green-500 rounded-r-lg flex items-center justify-center text-white text-sm">rounded-r-lg</div>
        <div class="w-32 h-24 bg-green-500 rounded-b-lg flex items-center justify-center text-white text-sm">rounded-b-lg</div>
        <div class="w-32 h-24 bg-green-500 rounded-l-lg flex items-center justify-center text-white text-sm">rounded-l-lg</div>
      </div>
    </div>

    <!-- Border radius por canto -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Border Radius por Canto</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-purple-500 rounded-tl-lg flex items-center justify-center text-white text-sm">rounded-tl-lg</div>
        <div class="w-32 h-24 bg-purple-500 rounded-tr-lg flex items-center justify-center text-white text-sm">rounded-tr-lg</div>
        <div class="w-32 h-24 bg-purple-500 rounded-bl-lg flex items-center justify-center text-white text-sm">rounded-bl-lg</div>
        <div class="w-32 h-24 bg-purple-500 rounded-br-lg flex items-center justify-center text-white text-sm">rounded-br-lg</div>
      </div>
    </div>

    <!-- Exemplos práticos -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Exemplos Práticos</h3>
      <div class="flex flex-wrap gap-4 items-center">
        <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white">Avatar</div>
        <button class="bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700">Botão Arredondado</button>
        <div class="bg-gray-200 px-4 py-2 rounded-full text-sm">Tag</div>
        <div class="bg-orange-500 w-4 h-4 rounded-full"></div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência de classes de border radius:

Classe Valor CSS Descrição
rounded-none border-radius: 0 Sem arredondamento
rounded-sm border-radius: 0.125rem Raio pequeno
rounded border-radius: 0.25rem Raio padrão
rounded-md border-radius: 0.375rem Raio médio
rounded-lg border-radius: 0.5rem Raio grande
rounded-xl border-radius: 0.75rem Raio extra-grande
rounded-2xl border-radius: 1rem Raio 2x extra-grande
rounded-full border-radius: 9999px Totalmente arredondado (círculo)
rounded-t-lg Raio superior 0.5rem Apenas lado superior
rounded-r-lg Raio direito 0.5rem Apenas lado direito
rounded-b-lg Raio inferior 0.5rem Apenas lado inferior
rounded-l-lg Raio esquerdo 0.5rem Apenas lado esquerdo
rounded-tl-lg Raio superior-esquerdo 0.5rem Apenas canto superior esquerdo
rounded-tr-lg Raio superior-direito 0.5rem Apenas canto superior direito
rounded-bl-lg Raio inferior-esquerdo 0.5rem Apenas canto inferior esquerdo
rounded-br-lg Raio inferior-direito 0.5rem Apenas canto inferior direito

CSS Tradicional vs Tailwind A abordagem tradicional requer definir a propriedade border-radius no CSS, enquanto o Tailwind usa nomes de classes como rounded-lg e rounded-full para declaração direta. O arredondamento por lado e por canto usa rounded-t-lg, rounded-tl-lg, etc.

💡 Dica: rounded-full é usado para criar avatares circulares, botões arredondados, etc. Combinado com largura e altura iguais, cria círculos perfeitos.

Bordas (border-*)

As classes border-* definem a largura, cor e estilo da borda de um elemento.

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 Bordas</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">
    <!-- Largura da borda -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Largura da Borda</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 border-0 border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border-0</div>
        <div class="w-24 h-24 border border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border</div>
        <div class="w-24 h-24 border-2 border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border-2</div>
        <div class="w-24 h-24 border-4 border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border-4</div>
        <div class="w-24 h-24 border-8 border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border-8</div>
      </div>
    </div>

    <!-- Cor da borda -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Cor da Borda</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 border-2 border-red-500 flex items-center justify-center text-xs">red</div>
        <div class="w-24 h-24 border-2 border-blue-500 flex items-center justify-center text-xs">blue</div>
        <div class="w-24 h-24 border-2 border-green-500 flex items-center justify-center text-xs">green</div>
        <div class="w-24 h-24 border-2 border-purple-500 flex items-center justify-center text-xs">purple</div>
        <div class="w-24 h-24 border-2 border-gray-300 flex items-center justify-center text-xs">gray</div>
      </div>
    </div>

    <!-- Bordas por lado -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Bordas por Lado</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 border-t-4 border-blue-500 flex items-center justify-center text-sm">border-t-4</div>
        <div class="w-32 h-24 border-r-4 border-green-500 flex items-center justify-center text-sm">border-r-4</div>
        <div class="w-32 h-24 border-b-4 border-purple-500 flex items-center justify-center text-sm">border-b-4</div>
        <div class="w-32 h-24 border-l-4 border-orange-500 flex items-center justify-center text-sm">border-l-4</div>
      </div>
    </div>

    <!-- Estilo da borda -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Estilo da Borda</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 border-2 border-solid border-blue-500 flex items-center justify-center text-sm">border-solid</div>
        <div class="w-32 h-24 border-2 border-dashed border-blue-500 flex items-center justify-center text-sm">border-dashed</div>
        <div class="w-32 h-24 border-2 border-dotted border-blue-500 flex items-center justify-center text-sm">border-dotted</div>
        <div class="w-32 h-24 border-2 border-double border-blue-500 flex items-center justify-center text-sm">border-double</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência de classes de borda:

Classe Valor CSS Descrição
border-0 border-width: 0 Sem borda
border border-width: 1px Borda de 1px
border-2 border-width: 2px Borda de 2px
border-4 border-width: 4px Borda de 4px
border-8 border-width: 8px Borda de 8px
border-blue-500 border-color: #3b82f6 Borda azul
border-t-4 border-top-width: 4px Borda superior de 4px
border-solid border-style: solid Borda sólida
border-dashed border-style: dashed Borda tracejada
border-dotted border-style: dotted Borda pontilhada

CSS Tradicional vs Tailwind A abordagem tradicional requer definir múltiplas propriedades como border-width, border-color e border-style no CSS, enquanto o Tailwind usa nomes de classes como border-2, border-blue-500 e border-dashed para declaração direta.

Divisores (divide-*)

As classes divide-* adicionam divisores entre elementos filhos sem precisar definir bordas em cada filho individualmente.

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 Divisores</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">
    <!-- Divisores verticais -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Divisores Verticais (Layout Horizontal)</h3>
      <div class="flex divide-x divide-gray-300">
        <div class="flex-1 p-4 text-center">Item 1</div>
        <div class="flex-1 p-4 text-center">Item 2</div>
        <div class="flex-1 p-4 text-center">Item 3</div>
        <div class="flex-1 p-4 text-center">Item 4</div>
      </div>
    </div>

    <!-- Divisores horizontais -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Divisores Horizontais (Layout Vertical)</h3>
      <div class="divide-y divide-gray-300">
        <div class="p-4">Item 1</div>
        <div class="p-4">Item 2</div>
        <div class="p-4">Item 3</div>
        <div class="p-4">Item 4</div>
      </div>
    </div>

    <!-- Diferentes cores -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Divisores em Diferentes Cores</h3>
      <div class="space-y-4">
        <div class="divide-y divide-blue-300">
          <div class="p-3">Divisor azul</div>
          <div class="p-3">Item 2</div>
        </div>
        <div class="divide-y divide-green-300">
          <div class="p-3">Divisor verde</div>
          <div class="p-3">Item 2</div>
        </div>
        <div class="divide-y divide-purple-300">
          <div class="p-3">Divisor roxo</div>
          <div class="p-3">Item 2</div>
        </div>
      </div>
    </div>

    <!-- Exemplo prático: lista -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Exemplo Prático: Lista</h3>
      <div class="divide-y divide-gray-200">
        <div class="py-4 flex justify-between items-center">
          <div>
            <div class="font-semibold">João Silva</div>
            <div class="text-sm text-gray-500">joao@exemplo.com</div>
          </div>
          <button class="text-blue-600 text-sm">Editar</button>
        </div>
        <div class="py-4 flex justify-between items-center">
          <div>
            <div class="font-semibold">Maria Santos</div>
            <div class="text-sm text-gray-500">maria@exemplo.com</div>
          </div>
          <button class="text-blue-600 text-sm">Editar</button>
        </div>
        <div class="py-4 flex justify-between items-center">
          <div>
            <div class="font-semibold">Pedro Oliveira</div>
            <div class="text-sm text-gray-500">pedro@exemplo.com</div>
          </div>
          <button class="text-blue-600 text-sm">Editar</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional requer definir border-bottom em cada elemento filho e tratar a borda do último elemento separadamente. O divide-* do Tailwind adiciona automaticamente divisores entre elementos filhos sem necessidade de tratamento extra.

💡 Dica: divide-y adiciona divisores horizontais entre elementos filhos, enquanto divide-x adiciona divisores verticais. Note que a direção é oposta à direção do flex.

Contornos Ring (ring-*)

As classes ring-* adicionam um contorno ring ao redor de um elemento. Semelhante ao outline, mas implementado usando box-shadow, então não afeta o layout.

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 Contorno Ring</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">
    <!-- Rings básicos -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Contornos Ring Básicos</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 bg-blue-100 ring-1 ring-blue-500 rounded flex items-center justify-center text-xs">ring-1</div>
        <div class="w-24 h-24 bg-blue-100 ring-2 ring-blue-500 rounded flex items-center justify-center text-xs">ring-2</div>
        <div class="w-24 h-24 bg-blue-100 ring-4 ring-blue-500 rounded flex items-center justify-center text-xs">ring-4</div>
        <div class="w-24 h-24 bg-blue-100 ring-8 ring-blue-500 rounded flex items-center justify-center text-xs">ring-8</div>
      </div>
    </div>

    <!-- Cores do ring -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Cores do Ring</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 bg-red-50 ring-2 ring-red-500 rounded flex items-center justify-center text-xs">red</div>
        <div class="w-24 h-24 bg-blue-50 ring-2 ring-blue-500 rounded flex items-center justify-center text-xs">blue</div>
        <div class="w-24 h-24 bg-green-50 ring-2 ring-green-500 rounded flex items-center justify-center text-xs">green</div>
        <div class="w-24 h-24 bg-purple-50 ring-2 ring-purple-500 rounded flex items-center justify-center text-xs">purple</div>
      </div>
    </div>

    <!-- ring-offset -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">ring-offset (Deslocamento do Ring)</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 bg-blue-100 ring-2 ring-blue-500 ring-offset-2 rounded flex items-center justify-center text-xs">offset-2</div>
        <div class="w-24 h-24 bg-blue-100 ring-2 ring-blue-500 ring-offset-4 rounded flex items-center justify-center text-xs">offset-4</div>
        <div class="w-24 h-24 bg-blue-100 ring-2 ring-blue-500 ring-offset-8 rounded flex items-center justify-center text-xs">offset-8</div>
      </div>
    </div>

    <!-- Exemplo prático: estados de foco -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Exemplo Prático: Estados de Foco</h3>
      <div class="space-y-4">
        <input type="text" placeholder="Clique para ver o efeito de foco" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none">
        <button class="bg-blue-600 text-white px-6 py-2 rounded-lg ring-2 ring-blue-600 ring-offset-2 hover:bg-blue-700">
          Botão com Ring
        </button>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência de classes de contorno ring:

Classe Valor CSS Descrição
ring-0 box-shadow: 0 0 0 0px ... Sem ring
ring-1 box-shadow: 0 0 0 1px ... Ring de 1px
ring-2 box-shadow: 0 0 0 2px ... Ring de 2px
ring-4 box-shadow: 0 0 0 4px ... Ring de 4px
ring-8 box-shadow: 0 0 0 8px ... Ring de 8px
ring-blue-500 --tw-ring-color: #3b82f6 Ring azul
ring-offset-2 box-shadow: 0 0 0 2px white, 0 0 0 4px ... Deslocamento de 2px
ring-offset-4 box-shadow: 0 0 0 4px white, 0 0 0 8px ... Deslocamento de 4px

CSS Tradicional vs Tailwind A abordagem tradicional requer definir box-shadow ou outline no CSS, enquanto o Tailwind usa nomes de classes como ring-2, ring-blue-500 e ring-offset-2 para declaração direta. ring-* é implementado usando box-shadow, então não afeta o layout.

💡 Dica: ring-* é comumente usado para estados de foco (focus:ring-2) e estados selecionados. ring-offset-* cria um espaço entre o ring e o elemento.

Outline

As classes outline-* definem o outline de um elemento. Semelhante ao ring-*, mas usa a propriedade nativa outline.

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 Outline</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">
    <!-- Outline básico -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Outline Básico</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-blue-100 outline outline-1 outline-blue-500 rounded flex items-center justify-center text-sm">outline-1</div>
        <div class="w-32 h-24 bg-blue-100 outline outline-2 outline-blue-500 rounded flex items-center justify-center text-sm">outline-2</div>
        <div class="w-32 h-24 bg-blue-100 outline outline-4 outline-blue-500 rounded flex items-center justify-center text-sm">outline-4</div>
        <div class="w-32 h-24 bg-blue-100 outline outline-8 outline-blue-500 rounded flex items-center justify-center text-sm">outline-8</div>
      </div>
    </div>

    <!-- outline-offset -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">outline-offset</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-green-100 outline outline-2 outline-green-500 outline-offset-0 rounded flex items-center justify-center text-sm">offset-0</div>
        <div class="w-32 h-24 bg-green-100 outline outline-2 outline-green-500 outline-offset-2 rounded flex items-center justify-center text-sm">offset-2</div>
        <div class="w-32 h-24 bg-green-100 outline outline-2 outline-green-500 outline-offset-4 rounded flex items-center justify-center text-sm">offset-4</div>
        <div class="w-32 h-24 bg-green-100 outline outline-2 outline-green-500 outline-offset-8 rounded flex items-center justify-center text-sm">offset-8</div>
      </div>
    </div>

    <!-- Estilos de outline -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Estilos de Outline</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-purple-100 outline outline-2 outline-dashed outline-purple-500 rounded flex items-center justify-center text-sm">dashed</div>
        <div class="w-32 h-24 bg-purple-100 outline outline-2 outline-dotted outline-purple-500 rounded flex items-center justify-center text-sm">dotted</div>
        <div class="w-32 h-24 bg-purple-100 outline outline-2 outline-double outline-purple-500 rounded flex items-center justify-center text-sm">double</div>
      </div>
    </div>

    <!-- Exemplo prático: estados de foco -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Exemplo Prático: Estados de Foco</h3>
      <div class="space-y-4">
        <input type="text" placeholder="Clique para ver o efeito de foco" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
        <button class="bg-blue-600 text-white px-6 py-2 rounded-lg outline outline-2 outline-offset-2 outline-blue-600 hover:bg-blue-700">
          Botão com Outline
        </button>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional requer definir múltiplas propriedades como outline-width, outline-color, outline-style e outline-offset no CSS, enquanto o Tailwind usa nomes de classes como outline-2, outline-blue-500 e outline-offset-2 para declaração direta.

⚠️ Nota: outline não afeta o layout (não ocupa espaço) e é comumente usado para estados de foco. ring usa box-shadow e também não afeta o layout. Os dois podem ser usados juntos.

Exemplo Abrangente

Combinando todos os conceitos acima, aqui está um exemplo completo de fundo e borda.

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 Abrangente de Fundo e Borda</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">
    <!-- Card com gradiente -->
    <div class="bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl shadow-xl p-8 text-white">
      <h2 class="text-3xl font-bold mb-4">Card com Gradiente</h2>
      <p class="opacity-90 mb-6">Use fundos com gradiente, border radius e sombras para criar cards bonitos</p>
      <button class="bg-white text-blue-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition-colors">
        Começar
      </button>
    </div>

    <!-- Formulário com borda -->
    <div class="bg-white rounded-xl shadow-lg p-8 border border-gray-200">
      <h3 class="text-xl font-semibold mb-6 pb-4 border-b border-gray-200">Formulário de Login</h3>
      <div class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">E-mail</label>
          <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Senha</label>
          <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
        </div>
        <button class="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white py-3 rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all">
          Entrar
        </button>
      </div>
    </div>

    <!-- Lista de funcionalidades -->
    <div class="bg-white rounded-xl shadow-lg divide-y divide-gray-200">
      <div class="p-6 flex items-center gap-4">
        <div class="w-12 h-12 bg-blue-100 rounded-full ring-2 ring-blue-500 flex items-center justify-center">
          <span class="text-blue-600 text-xl">1</span>
        </div>
        <div>
          <h4 class="font-semibold">Fundos com Gradiente</h4>
          <p class="text-sm text-gray-600">Suporte a gradientes multidirecionais e multicores</p>
        </div>
      </div>
      <div class="p-6 flex items-center gap-4">
        <div class="w-12 h-12 bg-green-100 rounded-full ring-2 ring-green-500 flex items-center justify-center">
          <span class="text-green-600 text-xl">2</span>
        </div>
        <div>
          <h4 class="font-semibold">Bordas Arredondadas</h4>
          <p class="text-sm text-gray-600">Border radius flexível e controle de bordas</p>
        </div>
      </div>
      <div class="p-6 flex items-center gap-4">
        <div class="w-12 h-12 bg-purple-100 rounded-full ring-2 ring-purple-500 flex items-center justify-center">
          <span class="text-purple-600 text-xl">3</span>
        </div>
        <div>
          <h4 class="font-semibold">Contornos Ring</h4>
          <p class="text-sm text-gray-600">Estados de foco e efeitos de seleção</p>
        </div>
      </div>
    </div>

    <!-- Grid de imagens -->
    <div class="grid grid-cols-3 gap-4">
      <div class="bg-cover bg-center h-48 rounded-xl ring-2 ring-white shadow-lg" style="background-image: url('https://picsum.photos/300/200?random=1')"></div>
      <div class="bg-cover bg-center h-48 rounded-xl ring-2 ring-white shadow-lg" style="background-image: url('https://picsum.photos/300/200?random=2')"></div>
      <div class="bg-cover bg-center h-48 rounded-xl ring-2 ring-white shadow-lg" style="background-image: url('https://picsum.photos/300/200?random=3')"></div>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional requer escrever CSS extenso para criar cards com gradiente, estilização de formulários, listas com divisores e efeitos semelhantes, enquanto o Tailwind realiza tudo diretamente no HTML usando classes utilitárias de fundo, borda e border-radius.

❓ Perguntas Frequentes

P: Qual a diferença entre ring e outline? R: ring é implementado usando box-shadow e suporta ring-offset para deslocamento. outline usa a propriedade nativa outline e suporta outline-offset. Nenhum afeta o layout. ring é recomendado para estados de foco, enquanto outline é melhor para outlines nativos.

P: Como criar texto com gradiente? R: Use bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent. bg-clip-text recorta o fundo para a área do texto, e text-transparent torna o texto transparente para que o fundo com gradiente apareça.

P: Por que a direção de divide-y é oposta à direção do flex? R: divide-y adiciona divisores horizontais entre elementos filhos, o que é adequado para filhos empilhados verticalmente. divide-x adiciona divisores verticais entre elementos filhos, o que é adequado para filhos dispostos horizontalmente. A direção é oposta à direção do flex para exibir corretamente.

P: Por que rounded-full cria um círculo? R: rounded-full define border-radius: 9999px. Quando o elemento tem largura e altura iguais, 9999px é muito maior que as dimensões do elemento, então o navegador calcula automaticamente como 50%, formando um círculo perfeito.

📖 Resumo

📝 Exercícios

  1. ⭐ Crie um botão com gradiente usando bg-gradient-to-r from-blue-600 to-purple-600 e rounded-full

  2. ⭐⭐ Crie uma lista de usuários usando divide-y divide-gray-200 para divisores, onde cada item de usuário inclui um avatar circular (rounded-full) e informações do usuário

  3. ⭐⭐⭐ Crie uma página de login com fundo em gradiente, um card de formulário com bordas, campos de entrada com estados de foco (focus:ring-2) e botões arredondados

100%