Vormide plugin

Vaata Markdownina Muuda teenuses GitHub Dokumentatsioon: 3843abd

@tailwindcss/forms on ametliku vormiplugina 1:1 PHP port. See pakub vormielementidele kindla lähtestuse — tekstisisestusväljadele, tekstialadele, valikutele, märkeruutudele ja raadionuppudele — ning viib need ühtsele lähtetasemele (välimuse lähtestamine, ääris, sisevahe, fookusrõngas, kohandatud valikunooleke ning märkeruudu ja raadionupu ikoonid), mida saad seejärel utiliitidega kohandada.

Kasutamine

Laadige plugin käsuga @plugin ja importige utiliitide kiht:

PHP

use TailwindPHP\tw;

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

Strateegia

strategy suvand määrab, kuidas stiile rakendatakse:

Strateegia	Käitumine
`base`	Stiilib vormi natiivseid elemente globaalselt selektoritega, nagu `[type='text']`, `textarea` ja `select`.
`class`	Stiilib ainult selgesõnalisi klasse `form-*`, jättes klassita elemendid muutmata.

Kui strategy on välja jäetud, rakendatakse mõlemat strateegiat — natiivsed elemendid saavad lähtestuse ja saadaval on ka klassid form-*. Ainult ühe strateegia määramisel jääb teine rakendamata:

CSS

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

Klassistrateegia

Strateegia class (või vaikimisi strateegia) korral lisage need klassid selgesõnaliselt elementidele, mida soovite stiilida:

Klass	Element
`form-input`	Tekstilaadsed sisestusväljad
`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";
    '
);

Iga klass lähtestab juhtelemendi välimuse ning määrab äärised, täidise ja fookusrõnga; form-select lisab taustapildina noole, form-checkbox/form-radio aga lisavad valitud oleku ikoonid. Muutke neid tavaliste utiliitidega (näiteks class="form-input rounded-lg border-gray-300").

Vaadake lehelt Pluginad direktiivi @plugin ja laadimise üksikasjade kohta.