Guia Pratico de Tailwind CSS - CSS Utility-First

O que voce vai aprender neste tutorial

✓ Conceitos basicos do Tailwind CSS
✓ Layout e espacamento
✓ Design responsivo
✓ Cores e tipografia
✓ Componentes de UI praticos
✓ Customizacao e otimizacao

Pre-requisitos

• Conhecimento basico de HTML e CSS
• Node.js instalado

Configuracao do Projeto

# Criar projeto
mkdir tailwind-tutorial
cd tailwind-tutorial
npm init -y

# Instalar Tailwind CSS
npm install -D tailwindcss postcss autoprefixer

# Criar arquivos de configuracao
npx tailwindcss init -p

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

src/input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Comando de build

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Step 1: Classes Utilitarias Basicas

Espacamento (Padding e Margin)

<!-- Padding -->
<div class="p-4">padding: 1rem em todas as direcoes</div>
<div class="px-4">padding: 1rem esquerda/direita</div>
<div class="py-2">padding: 0.5rem cima/baixo</div>
<div class="pt-8">padding: 2rem em cima</div>
<div class="pb-6">padding: 1.5rem embaixo</div>

<!-- Margin -->
<div class="m-4">margin: 1rem em todas as direcoes</div>
<div class="mx-auto">margin automatico esquerda/direita (centralizado)</div>
<div class="my-8">margin: 2rem cima/baixo</div>
<div class="mt-4">margin: 1rem em cima</div>
<div class="mb-2">margin: 0.5rem embaixo</div>

<!-- Margin negativo -->
<div class="-mt-4">margin negativo: -1rem em cima</div>

<!-- Escala de espacamento -->
<!--
  0: 0px
  1: 0.25rem (4px)
  2: 0.5rem (8px)
  3: 0.75rem (12px)
  4: 1rem (16px)
  5: 1.25rem (20px)
  6: 1.5rem (24px)
  8: 2rem (32px)
  10: 2.5rem (40px)
  12: 3rem (48px)
  16: 4rem (64px)
  ...
-->

Tamanho (Width e Height)

<!-- Width -->
<div class="w-full">100%</div>
<div class="w-1/2">50%</div>
<div class="w-1/3">33.333%</div>
<div class="w-64">16rem (256px)</div>
<div class="w-screen">100vw</div>
<div class="max-w-md">max-width: 28rem</div>
<div class="min-w-0">min-width: 0</div>

<!-- Height -->
<div class="h-screen">100vh</div>
<div class="h-full">100%</div>
<div class="h-64">16rem</div>
<div class="min-h-screen">min-height: 100vh</div>

Cores

<!-- Cor do texto -->
<p class="text-black">Preto</p>
<p class="text-white">Branco</p>
<p class="text-gray-500">Cinza 500</p>
<p class="text-blue-600">Azul 600</p>
<p class="text-red-500">Vermelho 500</p>

<!-- Cor de fundo -->
<div class="bg-white">Fundo branco</div>
<div class="bg-gray-100">Fundo cinza claro</div>
<div class="bg-blue-500">Fundo azul</div>

<!-- Opacidade -->
<div class="bg-black/50">Preto 50% transparente</div>
<div class="text-blue-500/75">Texto azul 75% transparente</div>

<!-- Cor da borda -->
<div class="border border-gray-300">Borda cinza</div>

Step 2: Flexbox e Grid

Flexbox

<!-- Flex basico -->
<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Direcao -->
<div class="flex flex-row">Horizontal (padrao)</div>
<div class="flex flex-col">Vertical</div>
<div class="flex flex-row-reverse">Horizontal (reverso)</div>

<!-- Alinhamento -->
<div class="flex justify-start">Alinhado a esquerda</div>
<div class="flex justify-center">Centralizado</div>
<div class="flex justify-end">Alinhado a direita</div>
<div class="flex justify-between">Espacamento entre</div>
<div class="flex justify-around">Espacamento ao redor</div>

<div class="flex items-start">Alinhado em cima</div>
<div class="flex items-center">Centralizado verticalmente</div>
<div class="flex items-end">Alinhado embaixo</div>

<!-- Centralizar completamente -->
<div class="flex items-center justify-center h-screen">
  Totalmente centralizado
</div>

<!-- Quebra de linha -->
<div class="flex flex-wrap">
  Com quebra de linha
</div>

<!-- Gap -->
<div class="flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Elementos filhos do Flex -->
<div class="flex">
  <div class="flex-1">Cresce e encolhe igualmente</div>
  <div class="flex-none">Nao cresce nem encolhe</div>
  <div class="flex-grow">Cresce</div>
  <div class="flex-shrink-0">Nao encolhe</div>
</div>

Grid

<!-- Grid basico -->
<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

<!-- Numero de colunas -->
<div class="grid grid-cols-1">1 coluna</div>
<div class="grid grid-cols-2">2 colunas</div>
<div class="grid grid-cols-4">4 colunas</div>
<div class="grid grid-cols-12">12 colunas</div>

<!-- Numero de linhas -->
<div class="grid grid-rows-3">3 linhas</div>

<!-- Span -->
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2">Ocupa 2 colunas</div>
  <div>1 coluna</div>
  <div>1 coluna</div>
  <div class="col-span-4">Ocupa 4 colunas (largura total)</div>
</div>

<!-- Auto-fit -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
  <!-- Ajusta automaticamente com minimo de 200px -->
</div>

Step 3: Design Responsivo

Breakpoints

<!--
  sm: 640px ou mais
  md: 768px ou mais
  lg: 1024px ou mais
  xl: 1280px ou mais
  2xl: 1536px ou mais
-->

<!-- Mobile first -->
<div class="text-sm md:text-base lg:text-lg">
  <!-- Padrao: small -->
  <!-- md ou mais: base -->
  <!-- lg ou mais: large -->
</div>

<!-- Grid responsivo -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  <!-- Mobile: 1 coluna -->
  <!-- sm: 2 colunas -->
  <!-- lg: 3 colunas -->
  <!-- xl: 4 colunas -->
</div>

<!-- Exibir/ocultar responsivo -->
<div class="hidden md:block">Visivel apenas em md ou maior</div>
<div class="block md:hidden">Visivel apenas abaixo de md</div>

<!-- Flexbox responsivo -->
<div class="flex flex-col md:flex-row gap-4">
  <!-- Mobile: vertical -->
  <!-- md ou mais: horizontal -->
</div>

Exemplo pratico: Header responsivo

<header class="bg-white shadow">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <a href="/" class="text-xl font-bold">Logo</a>

      <!-- Navegacao desktop -->
      <nav class="hidden md:flex gap-6">
        <a href="/" class="text-gray-600 hover:text-gray-900">Home</a>
        <a href="/about" class="text-gray-600 hover:text-gray-900">Sobre</a>
        <a href="/services" class="text-gray-600 hover:text-gray-900">Servicos</a>
        <a href="/contact" class="text-gray-600 hover:text-gray-900">Contato</a>
      </nav>

      <!-- Botao menu mobile -->
      <button class="md:hidden p-2">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
    </div>
  </div>
</header>

Step 4: Tipografia

Tamanho da fonte

<p class="text-xs">Extra Small (0.75rem)</p>
<p class="text-sm">Small (0.875rem)</p>
<p class="text-base">Base (1rem)</p>
<p class="text-lg">Large (1.125rem)</p>
<p class="text-xl">Extra Large (1.25rem)</p>
<p class="text-2xl">2XL (1.5rem)</p>
<p class="text-3xl">3XL (1.875rem)</p>
<p class="text-4xl">4XL (2.25rem)</p>
<p class="text-5xl">5XL (3rem)</p>

Peso da fonte

<p class="font-thin">Thin (100)</p>
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>
<p class="font-extrabold">Extrabold (800)</p>

Estilos de texto

<!-- Altura da linha -->
<p class="leading-tight">Altura de linha pequena</p>
<p class="leading-normal">Altura de linha normal</p>
<p class="leading-loose">Altura de linha grande</p>

<!-- Espacamento entre letras -->
<p class="tracking-tight">Espacamento pequeno</p>
<p class="tracking-wide">Espacamento grande</p>

<!-- Alinhamento de texto -->
<p class="text-left">Alinhado a esquerda</p>
<p class="text-center">Centralizado</p>
<p class="text-right">Alinhado a direita</p>
<p class="text-justify">Justificado</p>

<!-- Decoracao de texto -->
<p class="underline">Sublinhado</p>
<p class="line-through">Tachado</p>
<p class="no-underline">Sem sublinhado</p>

<!-- Transformacao de texto -->
<p class="uppercase">MAIUSCULAS</p>
<p class="lowercase">minusculas</p>
<p class="capitalize">Primeira Maiuscula</p>

<!-- Truncar texto -->
<p class="truncate">Texto longo truncado...</p>
<p class="line-clamp-2">Truncar em 2 linhas</p>

Step 5: Estados e Interacao

Hover e Focus

<!-- Hover -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
  Muda de cor no hover
</button>

<!-- Focus -->
<input
  class="border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/50 rounded px-3 py-2 outline-none"
  placeholder="Estilo muda no focus"
/>

<!-- Active -->
<button class="bg-blue-500 active:bg-blue-700 text-white px-4 py-2 rounded">
  Muda de cor ao clicar
</button>

<!-- Multiplos estados -->
<a
  href="#"
  class="text-blue-500 hover:text-blue-700 hover:underline focus:outline-none focus:ring-2"
>
  Link
</a>

Group Hover

<div class="group cursor-pointer p-4 border rounded hover:bg-gray-50">
  <h3 class="font-bold group-hover:text-blue-500">
    Titulo
  </h3>
  <p class="text-gray-600 group-hover:text-gray-900">
    Descricao
  </p>
  <span class="text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity">
    Ver mais →
  </span>
</div>

Modo Escuro

<!-- Adicionar classe dark no elemento pai para alternar -->
<div class="dark">
  <div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white p-4">
    Conteudo com suporte a modo escuro
  </div>
</div>

Step 6: Componentes Praticos

Card

<div class="bg-white rounded-lg shadow-md overflow-hidden max-w-sm">
  <img
    src="https://via.placeholder.com/400x200"
    alt="Card image"
    class="w-full h-48 object-cover"
  />
  <div class="p-6">
    <span class="text-xs font-semibold text-blue-500 uppercase tracking-wide">
      Categoria
    </span>
    <h2 class="mt-2 text-xl font-bold text-gray-900">
      Titulo do Card
    </h2>
    <p class="mt-2 text-gray-600">
      Descricao do card vai aqui. Pode ter multiplas linhas.
    </p>
    <div class="mt-4 flex items-center justify-between">
      <span class="text-2xl font-bold text-gray-900">R$ 99,80</span>
      <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors">
        Comprar
      </button>
    </div>
  </div>
</div>

Formulario

<form class="max-w-md mx-auto space-y-6">
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">
      Nome
    </label>
    <input
      type="text"
      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-shadow"
      placeholder="Joao Silva"
    />
  </div>

  <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-shadow"
      placeholder="exemplo@email.com"
    />
  </div>

  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">
      Mensagem
    </label>
    <textarea
      rows="4"
      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-shadow resize-none"
      placeholder="Escreva sua pergunta ou solicitacao"
    ></textarea>
  </div>

  <div class="flex items-center">
    <input
      type="checkbox"
      id="terms"
      class="w-4 h-4 text-blue-500 border-gray-300 rounded focus:ring-blue-500"
    />
    <label for="terms" class="ml-2 text-sm text-gray-600">
      Concordo com os termos de uso
    </label>
  </div>

  <button
    type="submit"
    class="w-full py-3 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-colors"
  >
    Enviar
  </button>
</form>

Abas de Navegacao

<div class="border-b border-gray-200">
  <nav class="flex -mb-px">
    <a
      href="#"
      class="px-6 py-3 border-b-2 border-blue-500 text-blue-500 font-medium"
    >
      Home
    </a>
    <a
      href="#"
      class="px-6 py-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
    >
      Perfil
    </a>
    <a
      href="#"
      class="px-6 py-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
    >
      Configuracoes
    </a>
  </nav>
</div>

Alertas

<!-- Sucesso -->
<div class="flex items-center p-4 bg-green-50 border-l-4 border-green-500 text-green-700">
  <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
  </svg>
  <span>Salvo com sucesso.</span>
</div>

<!-- Erro -->
<div class="flex items-center p-4 bg-red-50 border-l-4 border-red-500 text-red-700">
  <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"/>
  </svg>
  <span>Ocorreu um erro.</span>
</div>

<!-- Aviso -->
<div class="flex items-center p-4 bg-yellow-50 border-l-4 border-yellow-500 text-yellow-700">
  <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"/>
  </svg>
  <span>Atencao necessaria.</span>
</div>

Melhores Praticas

1. Mobile First
   - Estilo padrao para mobile
   - Expandir com breakpoints

2. Organizacao de Classes
   - Layout → Espacamento → Tamanho → Cores → Outros
   - Organizacao automatica com plugin Prettier

3. Extracao de Componentes
   - Componentizar padroes repetitivos
   - Criar classes customizadas com @apply

4. Performance
   - Remover classes nao utilizadas no build de producao
   - Build rapido com modo JIT

Resumo

Tailwind CSS permite construir UIs rapidamente com sua abordagem utility-first. Apos aprender as classes basicas, voce pode criar designs flexiveis apenas com HTML. Suporte a responsivo e modo escuro sao faceis de implementar, sendo ideal para criacao de sites modernos.