# Vormide plugin

`@tailwindcss/forms` on ametliku vormiplugina 1:1 PHP port. See pakub vormielementidele kindla lähtestuse — tekstisisestusväljadele, tekstialadele, valikutele, märkeruutudele ja raadionuppudele — ning viib need ühtsele lähtetasemele (välimuse lähtestamine, ääris, sisevahe, fookusrõngas, kohandatud valikunooleke ning märkeruudu ja raadionupu ikoonid), mida saad seejärel utiliitidega kohandada.

## Kasutamine

Laadige plugin käsuga `@plugin` ja importige utiliitide kiht:

```php
use TailwindPHP\tw;

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

## Strateegia

`strategy` suvand määrab, kuidas stiile rakendatakse:

| Strateegia | Käitumine |
|----------|----------|
| `base` | Stiilib vormi natiivseid elemente globaalselt selektoritega, nagu `[type='text']`, `textarea` ja `select`. |
| `class` | Stiilib ainult selgesõnalisi klasse `form-*`, jättes klassita elemendid muutmata. |

Kui `strategy` on välja jäetud, rakendatakse **mõlemat** strateegiat — natiivsed elemendid saavad lähtestuse ja saadaval on ka klassid `form-*`. Ainult ühe strateegia määramisel jääb teine rakendamata:

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

## Klassistrateegia

Strateegia `class` (või vaikimisi strateegia) korral lisage need klassid selgesõnaliselt elementidele, mida soovite stiilida:

| Klass | Element |
|-------|---------|
| `form-input` | Tekstilaadsed sisestusväljad |
| `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";
    '
);
```

Iga klass lähtestab juhtelemendi välimuse ning määrab äärised, täidise ja fookusrõnga; `form-select` lisab taustapildina noole, `form-checkbox`/`form-radio` aga lisavad valitud oleku ikoonid. Muutke neid tavaliste utiliitidega (näiteks `class="form-input rounded-lg border-gray-300"`).

Vaadake lehelt [Pluginad](https://tailwindphp.inline0.dev/et/docs/plugins) direktiivi `@plugin` ja laadimise üksikasjade kohta.