Forms Plugin

Vis som Markdown Rediger på GitHub Dokumentation hos 3843abd

@tailwindcss/forms er en 1:1-port af det officielle PHP-plugin. Det giver en fastlagt nulstilling af formularfelter — tekstfelter, tekstområder, selectfelter, afkrydsningsfelter og radioknapper — så de får en ensartet grundstil (nulstillet udseende, kant, indvendig afstand, fokusring, brugerdefineret pil til selectfelter og ikoner til afkrydsningsfelter/radioknapper), som du derefter kan tilsidesætte med utilities.

Brug

Indlæs pluginet med @plugin, og importer utilities-laget:

PHP

use TailwindPHP\tw;

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

Strategi

Indstillingen strategy styrer, hvordan typografier anvendes:

Strategi	Adfærd
`base`	Styler indbyggede formularelementer globalt via selektorer som `[type='text']`, `textarea` og `select`.
`class`	Styler kun de eksplicitte klasser `form-*`, så elementer uden klasse forbliver urørte.

Hvis strategy udelades, anvendes begge strategier — indbyggede elementer får grundnulstillingen, og klasserne form-* er også tilgængelige. Vælg én strategi for at fravælge den anden:

CSS

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

Klassestrategi

Med strategien class (eller standardstrategien) anvender du disse klasser eksplicit på de elementer, du vil style:

Klasse	Element
`form-input`	Inputfelter, der ligner tekstfelter
`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";
    '
);

Hver klasse nulstiller feltets udseende og angiver kanter, indvendig afstand og en fokusring; form-select tilføjer et baggrundsbillede med en pil, og form-checkbox/form-radio tilføjer ikoner for den markerede tilstand. Du kan tilsidesætte det hele med almindelige utilities (for eksempel class="form-input rounded-lg border-gray-300").

Se Plugins for oplysninger om direktivet @plugin og indlæsning.