14. Формы

Tailwind CSS: Формы

Формы — критически важная часть любого UI. Tailwind даёт полный контроль над стилизацией инпутов, кнопок и других элементов форм.

Базовая стилизация инпутов

По умолчанию браузеры добавляют свои стили к формам. Tailwind reset их убирает. Вот типовые стили инпутов:

<!-- Текстовый инпут -->
<input
  type="text"
  placeholder="Введите текст..."
  class="w-full px-4 py-2.5
         border border-gray-300 rounded-lg
         text-gray-900 placeholder-gray-400 text-sm
         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
         transition-colors"
>

<!-- С иконкой слева -->
<div class="relative">
  <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400">...</svg>
  <input type="text" placeholder="Поиск..."
    class="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>

<!-- Textarea -->
<textarea
  placeholder="Введите текст..."
  rows="4"
  class="w-full px-4 py-3 border border-gray-300 rounded-lg text-sm
         focus:outline-none focus:ring-2 focus:ring-blue-500
         resize-none"
></textarea>

<!-- Select -->
<select class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm text-gray-900
               focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white">
  <option value="">Выберите...</option>
  <option>Опция 1</option>
</select>

Состояния инпута

<!-- Нормальный -->
<input class="border-gray-300 focus:ring-blue-500 focus:border-blue-500">

<!-- Ошибка -->
<input class="border-red-500 focus:ring-red-500 text-red-900">
<p class="text-red-600 text-xs mt-1">Это поле обязательно</p>

<!-- Успех -->
<input class="border-emerald-500 focus:ring-emerald-500">
<p class="text-emerald-600 text-xs mt-1">✓ Корректно</p>

<!-- Заблокирован -->
<input disabled class="bg-gray-50 border-gray-200 text-gray-400 cursor-not-allowed">

Чекбоксы и Radio

Нативные чекбоксы можно кастомизировать через accent-color:

<!-- Простой чекбокс с accent-color -->
<input type="checkbox" class="w-4 h-4 accent-blue-600 cursor-pointer">

<!-- С лейблом -->
<label class="flex items-center gap-2 cursor-pointer">
  <input type="checkbox" class="w-4 h-4 accent-blue-600">
  <span class="text-sm text-gray-700">Запомнить меня</span>
</label>

<!-- Radio group -->
<div class="space-y-2">
  <label class="flex items-center gap-2 cursor-pointer">
    <input type="radio" name="plan" value="free" class="accent-blue-600">
    <span class="text-sm">Бесплатный</span>
  </label>
  <label class="flex items-center gap-2 cursor-pointer">
    <input type="radio" name="plan" value="pro" class="accent-blue-600">
    <span class="text-sm">Pro</span>
  </label>
</div>

Кастомный Toggle Switch

<label class="relative inline-flex items-center cursor-pointer">
  <input type="checkbox" class="sr-only peer">
  <div class="w-11 h-6 bg-gray-200 rounded-full peer
              peer-checked:bg-blue-600
              after:content-[''] after:absolute after:top-[2px] after:left-[2px]
              after:bg-white after:rounded-full after:h-5 after:w-5
              after:transition-all
              peer-checked:after:translate-x-full
              transition-colors">
  </div>
  <span class="ml-3 text-sm text-gray-700">Включить уведомления</span>
</label>

@tailwindcss/forms плагин

Плагин нормализует стили форм и делает их красивее из коробки:

npm install @tailwindcss/forms

tailwind.config.js

module.exports = {
  plugins: [require('@tailwindcss/forms')],
}

Плагин добавляет базовые стили к input, select, textarea, checkbox, radio, и ты можешь дополнять их своими классами.

Полная форма — шаблон

<form class="space-y-6 max-w-md">
  <!-- Поле с лейблом -->
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1.5">
      Имя <span class="text-red-500">*</span>
    </label>
    <input type="text" required
      class="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm
             focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
  </div>

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

  <!-- Кнопка отправки -->
  <button type="submit"
    class="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl
           transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
    Отправить
  </button>
</form>

Практика