Plugin pro formuláře

Zobrazit jako Markdown Upravit na GitHub Dokumentace na 3843abd

@tailwindcss/forms je věrný port 1:1 PHP oficiálního pluginu pro formuláře. Poskytuje názorově vyhraněný reset ovládacích prvků formuláře — textových polí, textových oblastí, výběrů, zaškrtávacích polí a přepínačů — a sjednocuje jejich výchozí vzhled (resetuje vzhled, nastavuje okraje, odsazení, zvýraznění při zaměření, vlastní šipku výběru a ikony zaškrtávacích polí a přepínačů), který pak můžete upravit pomocí utilit.

Použití

Načtěte plugin pomocí @plugin a importujte vrstvu utilit:

PHP

use TailwindPHP\tw;

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

Strategie

Možnost strategy určuje, jak se styly použijí:

Strategie	Chování
`base`	Styluje nativní prvky formuláře globálně pomocí selektorů, jako jsou `[type='text']`, `textarea` a `select`.
`class`	Styluje pouze výslovně uvedené třídy `form-*`, prvky bez třídy ponechává beze změny.

Pokud strategy vynecháte, použijí se obě strategie — nativní prvky získají výchozí reset a k dispozici budou také třídy form-*. Nastavením jediné strategie vypnete druhou:

CSS

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

Strategie tříd

Při použití strategie class (nebo výchozího nastavení) přidejte tyto třídy výslovně k prvkům, které chcete stylovat:

Třída	Prvek
`form-input`	Textová vstupní pole
`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";
    '
);

Každá třída resetuje vzhled ovládacího prvku a nastavuje okraje, odsazení a zvýraznění při zaměření; form-select přidává obrázek šipky na pozadí a form-checkbox/form-radio přidávají ikony pro zaškrtnutý stav. Vše můžete přepsat běžnými utilitami (například class="form-input rounded-lg border-gray-300").

Viz Pluginy, kde najdete informace o direktivě @plugin a načítání.