Plugin per moduli

Visualizza come Markdown Modifica su GitHub Documentazione di 3843abd

@tailwindcss/forms è un port 1:1 PHP del plugin ufficiale per i moduli. Fornisce un reset predefinito per i controlli dei moduli — campi di testo, aree di testo, menu di selezione, caselle di controllo e pulsanti di opzione — portandoli a una base coerente (reset dell'aspetto, bordo, spaziatura interna, contorno di messa a fuoco, chevron personalizzato per i menu di selezione e icone per caselle di controllo e pulsanti di opzione), che potete poi sovrascrivere con le utility.

Utilizzo

Carica il plugin con @plugin e importa il livello delle utility:

PHP

use TailwindPHP\tw;

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

Strategia

L'opzione strategy controlla come vengono applicati gli stili:

Strategia	Comportamento
`base`	Applica stili globalmente agli elementi nativi dei moduli tramite selettori come `[type='text']`, `textarea` e `select`.
`class`	Applica stili solo alle classi esplicite `form-*`, lasciando invariati gli elementi senza classe.

Se strategy viene omesso, vengono applicate entrambe le strategie: agli elementi nativi viene applicato il reset di base e sono disponibili anche le classi form-*. Imposta una sola strategia per disattivare l'altra:

CSS

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

Strategia delle classi

Con la strategia class (o quella predefinita), applica esplicitamente queste classi agli elementi a cui vuoi applicare gli stili:

Classe	Elemento
`form-input`	Campi simili a quelli di testo
`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";
    '
);

Ogni classe ripristina l'aspetto del controllo e imposta bordi, spaziatura interna e indicatore di focus; form-select aggiunge un'immagine di sfondo con chevron e form-checkbox/form-radio aggiungono icone per lo stato selezionato. Puoi sovrascrivere tutto questo con le normali utility (per esempio class="form-input rounded-lg border-gray-300").

Consulta Plugin per la direttiva @plugin e le istruzioni di caricamento.