Formulários com Tailwind

Formulários são elementos centrais em qualquer aplicação interativa. Com Tailwind CSS, você pode estilizar campos de entrada, selects, checkboxes e botões com rapidez e controle total sobre a aparência e responsividade.

Nesta página, você verá exemplos de campos isolados, formulários completos e boas práticas para estruturação de formulários acessíveis e visuais

1. Campo de texto básico

<input type="text" placeholder="Seu nome"
  class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>

2. Campo com label

<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email"
  class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
/>

3. Campo com erro de validação

<label class="block text-sm font-medium text-red-700 mb-1">Senha</label>
<input type="password"
  class="w-full px-4 py-2 border border-red-500 text-red-900 placeholder-red-300 rounded focus:outline-none focus:ring-2 focus:ring-red-400"
/>
<p class="text-sm text-red-600 mt-1">Senha inválida.</p>

4. Select estilizado

<label class="block text-sm font-medium text-gray-700 mb-1">Categoria</label>
<select class="w-full px-4 py-2 border border-gray-300 rounded bg-white focus:outline-none focus:ring-2 focus:ring-blue-500">
  <option>Escolha uma opção</option>
  <option>Opção A</option>
  <option>Opção B</option>
</select>

5. Checkbox com label

<label class="inline-flex items-center space-x-2">
  <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600">
  <span class="text-sm text-gray-700">Aceito os termos</span>
</label>

6. Textarea

<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 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
  placeholder="Escreva aqui..."></textarea>

7. Formulário completo com ação

<form class="bg-white p-6 rounded-lg shadow max-w-md space-y-4">
  <div>
    <label class="block text-sm font-medium mb-1">Nome</label>
    <input type="text" class="w-full border px-4 py-2 rounded focus:ring-2 focus:ring-blue-500">
  </div>

  <div>
    <label class="block text-sm font-medium mb-1">Email</label>
    <input type="email" class="w-full border px-4 py-2 rounded focus:ring-2 focus:ring-blue-500">
  </div>

  <div>
    <label class="block text-sm font-medium mb-1">Mensagem</label>
    <textarea rows="3" class="w-full border px-4 py-2 rounded focus:ring-2 focus:ring-blue-500"></textarea>
  </div>

  <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
    Enviar
  </button>
</form>

Dicas para formulários com Tailwind

Use focus:ring-* para indicar foco de forma acessível e moderna
Combine space-y-* com divs para separação vertical entre campos
Evite usar <br> — prefira mb-* ou space-y-* para manter o layout limpo
Para projetos maiores, considere o plugin oficial @tailwindcss/forms para normalizar campos nativos

Com Tailwind CSS, criar formulários visualmente profissionais e usáveis se torna simples, direto e adaptável a qualquer contexto de aplicação — seja um site institucional ou um painel administrativo.