Оформление форм

После Preflight поля формы выглядят почти голыми: без рамки и отступов. Это удобно — вы задаёте вид сами, и поля одинаково выглядят во всех браузерах. Соберём форму подписки на новинки магазина.

Поле ввода

Рамка, отступы, скругление и заметный фокус — базовый набор для любого поля:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<label class="block max-w-xs">
  <span class="text-sm font-medium text-gray-700">Email</span>
  <input type="email" placeholder="anna@example.com"
    class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 placeholder:text-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:outline-none">
</label>

Подпись над полем, серая подсказка внутри. Щёлкните в поле — рамка станет синей и появится мягкое кольцо.

Список и текстовая область

Те же классы подходят для <select> и <textarea>, поэтому поля одной формы выглядят одинаково:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="max-w-xs space-y-3">
  <select class="block w-full rounded-lg border border-gray-300 px-3 py-2">
    <option>Аудио</option>
    <option>Зарядки</option>
  </select>
  <textarea rows="3" class="block w-full rounded-lg border border-gray-300 px-3 py-2" placeholder="Комментарий"></textarea>
</div>

Флажки и цвет акцента

Флажки и переключатели рисует браузер. Поменять их цвет проще всего утилитой accent-:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<label class="flex items-center gap-2">
  <input type="checkbox" checked class="size-4 accent-indigo-600">
  <span>Присылать скидки</span>
</label>

Отмеченный флажок синий, как кнопки магазина.

Ошибки и состояния

user-invalid: срабатывает, когда поле заполнено неверно и пользователь уже с ним поработал, — в отличие от invalid:, который красит пустое обязательное поле сразу. disabled: оформляет отключённое поле, file: — кнопку выбора файла:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<form class="max-w-xs space-y-3">
  <input type="email" required placeholder="Email"
    class="block w-full rounded-lg border border-gray-300 px-3 py-2 user-invalid:border-red-500 user-invalid:text-red-600">
  <input type="text" disabled value="Анна"
    class="block w-full rounded-lg border border-gray-300 px-3 py-2 disabled:bg-gray-100 disabled:text-gray-500">
  <input type="file"
    class="block w-full text-sm file:mr-3 file:rounded-lg file:border-0 file:bg-indigo-50 file:px-3 file:py-2 file:text-indigo-700">
</form>

Введите в первое поле текст без @ и щёлкните в другом месте — рамка покраснеет. Кнопка «Выберите файл» получила светло-синий фон.

Плагин @tailwindcss/forms

Официальный плагин задаёт полям аккуратное базовое оформление, включая собственный вид флажков. В проекте его устанавливают и подключают директивой @plugin:

npm install -D @tailwindcss/forms

@import "tailwindcss";
@plugin "@tailwindcss/forms";

После этого поля сразу получают рамку и отступы, и утилитами остаётся их подправить. Браузерный скрипт плагины из npm не подключает, поэтому примеры урока обходятся без него.

Частая ошибка

Не связать подпись с полем. Если <span> лежит рядом с <input>, а не внутри <label>, щелчок по подписи не ставит фокус, а программы чтения с экрана не знают, к чему относится текст. Оборачивайте поле в <label>, как в примерах выше, или связывайте их атрибутами for и id.

Спасибо, что читаете!