Plugin für Formulare

Als Markdown anzeigen Auf GitHub bearbeiten Dokumentation zu 3843abd

@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.