# Plugin für Formulare

`@tailwindcss/forms` ist ein 1:1-PHP-Port des offiziellen Formular-Plugins. Es bietet einen vordefinierten Reset für Formularelemente — Texteingabefelder, Textbereiche, Auswahlfelder, Checkboxen und Optionsfelder. So erhalten sie eine einheitliche Basis (zurückgesetztes Aussehen, Rahmen, Innenabstand, Fokusring, benutzerdefinierter Auswahlpfeil und Symbole für Checkboxen und Optionsfelder), die du anschließend mit Utilities überschreiben kannst.

## Verwendung

Lade das Plugin mit `@plugin` und importiere die Utilities-Ebene:

```php
use TailwindPHP\tw;

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

## Strategie

Die Option `strategy` bestimmt, wie Stile angewendet werden:

| Strategie | Verhalten |
|----------|----------|
| `base` | Stile native Formularelemente global mit Selektoren wie `[type='text']`, `textarea` und `select`. |
| `class` | Stile nur die ausdrücklich angegebenen `form-*`-Klassen und lasse Elemente ohne Klasse unberührt. |

Wenn `strategy` weggelassen wird, kommen **beide** Strategien zum Einsatz: Native Elemente erhalten den Basis-Reset, und die `form-*`-Klassen sind ebenfalls verfügbar. Lege eine einzelne Strategie fest, um die andere zu deaktivieren:

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

## Klassenstrategie

Wende bei der `class`-Strategie (oder standardmäßig) diese Klassen ausdrücklich auf die Elemente an, die du gestalten möchtest:

| Klasse | Element |
|-------|---------|
| `form-input` | Eingabefelder für Text |
| `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";
    '
);
```

Jede Klasse setzt das Erscheinungsbild des Steuerelements zurück und legt Rahmen, Innenabstand und Fokusring fest. `form-select` fügt ein Chevron-Hintergrundbild hinzu, während `form-checkbox`/`form-radio` Symbole für den aktivierten Zustand ergänzen. Überschreibe diese Stile mit regulären Utilities (zum Beispiel `class="form-input rounded-lg border-gray-300"`).

Informationen zur `@plugin`-Direktive und zum Laden findest du unter [Plugins](https://tailwindphp.inline0.dev/de/docs/plugins).