Plugin voor formulieren

Bekijken als Markdown Bewerken op GitHub Documentatie op 3843abd

@tailwindcss/forms is een 1:1-port van de officiële formulierenplugin van PHP. De plugin biedt een uitgesproken reset voor formulierelementen — tekstvelden, tekstgebieden, selectievakken, selectievakjes en radioknoppen — en brengt ze op een consistente basis (reset van de weergave, rand, opvulling, focusring, aangepaste chevron voor selectievakken en pictogrammen voor selectievakjes en radioknoppen), die je vervolgens met hulpprogramma's kunt overschrijven.

Gebruik

Laad de plugin met @plugin en importeer de utilitieslaag:

PHP

use TailwindPHP\tw;

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

Strategie

De optie strategy bepaalt hoe stijlen worden toegepast:

Strategie	Gedrag
`base`	Stijlt native formulierelementen globaal met selectors zoals `[type='text']`, `textarea` en `select`.
`class`	Stijlt alleen de expliciete klassen `form-*`; elementen zonder klasse blijven ongemoeid.

Als strategy wordt weggelaten, worden beide strategieën toegepast — native elementen krijgen de basisreset en de klassen form-* zijn ook beschikbaar. Stel één strategie in om de andere uit te schakelen:

CSS

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

Klassenstrategie

Pas bij de strategie class (of de standaardstrategie) deze klassen expliciet toe op de elementen die je wilt stijlen:

Klasse	Element
`form-input`	Tekstachtige invoervelden
`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";
    '
);

Elke klasse herstelt de weergave van het besturingselement en stelt randen, opvulling en een focusring in; form-select voegt een chevron als achtergrondafbeelding toe en form-checkbox/form-radio voegen pictogrammen voor aangevinkte statussen toe. Overschrijf dit naar wens met gewone utilities (bijvoorbeeld class="form-input rounded-lg border-gray-300").

Zie Plugins voor de directive @plugin en informatie over het laden.