Insticksprogram för formulär

Visa som Markdown Redigera på GitHub Dokumentation på 3843abd

@tailwindcss/forms är en 1:1-portering i PHP av det officiella insticksprogrammet för formulär. Det ger formulärkontrollerna en bestämd grundstil — textfält, textområden, listrutor, kryssrutor och alternativknappar — och ger dem en enhetlig bas (återställt utseende, kantlinje, utfyllnad, fokusring, anpassad nedåtpil i listrutor samt ikoner för kryssrutor och alternativknappar) som du sedan kan åsidosätta med utilities.

Användning

Läs in insticksprogrammet med @plugin och importera utilities-lagret:

PHP

use TailwindPHP\tw;

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

Strategi

Alternativet strategy styr hur stilarna tillämpas:

Strategi	Beteende
`base`	Formger inbyggda formulärelement globalt med selektorer som `[type='text']`, `textarea` och `select`.
`class`	Formger endast de uttryckliga klasserna `form-*` och lämnar element utan klass orörda.

När strategy utelämnas tillämpas båda strategierna — inbyggda element får grundåterställningen och klasserna form-* är också tillgängliga. Ange en enda strategi för att välja bort den andra:

CSS

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

Klassstrategi

Med strategin class (eller standardinställningen) lägger du uttryckligen till följande klasser på de element du vill formge:

Klass	Element
`form-input`	Textliknande inmatningsfält
`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";
    '
);

Varje klass återställer kontrollens utseende och anger kantlinjer, utfyllnad och en fokusring. form-select lägger till en bakgrundsbild med nedåtpil, och form-checkbox/form-radio lägger till ikoner för markerat läge. Åsidosätt valfri del med vanliga utilities (till exempel class="form-input rounded-lg border-gray-300").

Se Insticksprogram för direktivet @plugin och information om inläsning.