# Плагін форм

`@tailwindcss/forms` — це 1:1 PHP офіційного плагіна форм. Він задає рекомендований початковий набір стилів для елементів форм — текстових полів, текстових областей, списків, прапорців і перемикачів. Це забезпечує узгоджений базовий вигляд (скидання стандартного вигляду, рамка, внутрішні відступи, кільце фокусу, власна стрілка списку та значки прапорців і перемикачів), який потім можна перевизначити утилітами.

## Використання

Завантажте плагін за допомогою `@plugin` та імпортуйте шар утиліт:

```php
use TailwindPHP\tw;

$css = tw::generate(
    '<input class="form-input"><select class="form-select"></select>',
    '@plugin "@tailwindcss/forms"; @import "tailwindcss/utilities.css";'
);
```

## Стратегія

Опція `strategy` визначає, як застосовуються стилі:

| Стратегія | Поведінка |
|----------|----------|
| `base` | Стилізує вбудовані елементи форм глобально за допомогою селекторів, як-от `[type='text']`, `textarea` і `select`. |
| `class` | Стилізує лише явно задані класи `form-*`, не змінюючи елементи без класів. |

Якщо `strategy` не вказано, застосовуються **обидві** стратегії: вбудовані елементи отримують базове скидання стилів, а класи `form-*` також стають доступними. Вкажіть лише одну стратегію, щоб вимкнути іншу:

```css
@plugin "@tailwindcss/forms" {
    strategy: "class";
}
```

## Стратегія класів

За стратегії `class` (або за замовчуванням) явно застосуйте ці класи до елементів, які потрібно стилізувати:

| Клас | Елемент |
|-------|---------|
| `form-input` | Текстові поля вводу |
| `form-textarea` | `<textarea>` |
| `form-select` | `<select>` |
| `form-multiselect` | `<select multiple>` |
| `form-checkbox` | `<input type="checkbox">` |
| `form-radio` | `<input type="radio">` |

```php
$css = tw::generate(
    '
        <input class="form-input">
        <textarea class="form-textarea"></textarea>
        <select class="form-select"></select>
        <select class="form-multiselect" multiple></select>
        <input type="checkbox" class="form-checkbox">
        <input type="radio" class="form-radio">
    ',
    '
        @plugin "@tailwindcss/forms" {
            strategy: "class";
        }
        @import "tailwindcss/utilities.css";
    '
);
```

Кожен клас скидає вигляд елемента керування та задає рамки, внутрішні відступи й індикатор фокусу; `form-select` додає фонове зображення шеврона, а `form-checkbox`/`form-radio` додають піктограми для позначеного стану. Перевизначте будь-які з цих властивостей звичайними утилітарними класами (наприклад, `class="form-input rounded-lg border-gray-300"`).

Докладніше про директиву `@plugin` та завантаження див. у розділі [Плагіни](https://tailwindphp.inline0.dev/uk/docs/plugins).