tailwindcss forms

@tailwindcss/формы

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

Установка

Установите плагин из npm:

 npm install -D @tailwindcss/forms

Затем добавьте плагин в файл tailwind.config.js :

 // Tailwind.config.jsmodule.exports = {
  тема: {// ...
  },
  плагины: [require('@tailwindcss/forms'),// ...
  ],}

Основное использование

Посмотреть живую демонстрацию

Все основные элементы формы, которые вы используете, теперь будут иметь несколько простых стилей по умолчанию, которые можно легко переопределить с помощью утилит.

В настоящее время мы добавляем базовые удобные стили форм для следующих типов элементов формы:

• input[type='text']

• input[type='password']

• input[type='email']

• input[type='number']

• input[type='url']

• input[type='date']

• input[type='datetime-local']

• input[type='month']

• input[type='week']

• input[type='time']

• input[type='search']

• input[type='tel']

• input[type='checkbox']

• input[type='radio']

• select

• select[multiple]

• textarea

Каждый элемент нормализован/сброшен до простого визуально согласованного стиля, который легко настроить с помощью утилит, даже такие элементы, как <select> или <input type="checkbox"> которые обычно необходимо сбросить с помощью appearance: none и настроить с помощью пользовательского интерфейса. CSS:

 <!-- Теперь вы можете настроить отступы для выбранного элемента: --><select class="rounded-full px-4 py-3">
  <!-- ... --></select><!-- Или измените цвет флажка с помощью утилит цвета текста: --><input type="checkbox" class="rounded text-pink-500" />

Скоро появятся новые примеры настройки и лучшие практики.

Использование классов для стилизации

В дополнение к глобальным стилям мы также генерируем набор соответствующих классов, которые можно использовать для явного применения стилей формы к элементу. Это может быть полезно в ситуациях, когда вам нужно сделать элемент, не являющийся формой, например <div> , выглядеть как элемент формы.

 <input type="email" class="form-input rounded-full px-4 py-3" /><select class="form-select rounded-full px-4 py-3">
  <!-- ... --></select><input type="checkbox" class="form-checkbox rounded text-pink-500" />

Вот полная таблица предоставленных классов form-* для справки:

База	Сорт
[type='text']	form-input
[type='email']	form-input
[type='url']	form-input
[type='password']	form-input
[type='number']	form-input
[type='date']	form-input
[type='datetime-local']	form-input
[type='month']	form-input
[type='search']	form-input
[type='tel']	form-input
[type='time']	form-input
[type='week']	form-input
textarea	form-textarea
select	form-select
select[multiple]	form-multiselect
[type='checkbox']	form-checkbox
[type='radio']	form-radio

Использование только глобальных стилей или только классов

Хотя мы рекомендуем рассматривать этот плагин как «сброс формы», а не как набор стилей компонентов формы, в некоторых случаях наш подход по умолчанию может быть слишком жестким, особенно при интеграции этого плагина в существующие проекты.

Если создание как глобальных (базовых) стилей, так и классов не работает в вашем проекте, вы можете использовать опцию strategy , чтобы ограничить плагин только одним из этих подходов.

 // Tailwind.config.jsplugins: [
  require("@tailwindcss/forms")({strategy: 'base', // генерируем только глобальные стилиstrategy: 'class', // генерируем только классы
  }),],

При использовании base стратегии элементы формы стилизуются глобально, и классы form-{name} не создаются.

При использовании стратегии class элементы формы не стилизуются глобально, а вместо этого должны быть стилизованы с использованием сгенерированных классов form-{name} .