Plugin de formulaires

Afficher au format Markdown Modifier sur GitHub Documentation de 3843abd

@tailwindcss/forms est un portage 1:1 de PHP, le plugin officiel. Il fournit une réinitialisation assumée des contrôles de formulaire — champs texte, zones de texte, listes de sélection, cases à cocher et boutons radio — pour leur donner une base cohérente (réinitialisation de l’apparence, bordure, marge intérieure, anneau de focus, chevron personnalisé pour les listes et icônes pour les cases à cocher et les boutons radio), que vous pouvez ensuite remplacer avec des utilitaires.

Utilisation

Chargez le plugin avec @plugin et importez la couche des utilitaires :

PHP

use TailwindPHP\tw;

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

Stratégie

L’option strategy détermine la façon dont les styles sont appliqués :

Stratégie	Comportement
`base`	Applique globalement des styles aux éléments de formulaire natifs avec des sélecteurs tels que `[type='text']`, `textarea` et `select`.
`class`	Applique des styles uniquement aux classes explicites `form-*`, sans toucher aux éléments dépourvus de classe.

Si strategy est omise, les deux stratégies sont appliquées : les éléments natifs reçoivent la réinitialisation de base et les classes form-* sont également disponibles. Définissez une seule stratégie pour désactiver l’autre :

CSS

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

Stratégie des classes

Avec la stratégie class (ou celle par défaut), appliquez explicitement ces classes aux éléments que vous souhaitez styliser :

Classe	Élément
`form-input`	Champs de type texte
`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";
    '
);

Chaque classe réinitialise l’apparence du contrôle et définit les bordures, la marge intérieure et un anneau de focus ; form-select ajoute une image de fond en forme de chevron, et form-checkbox/form-radio ajoutent des icônes pour l’état coché. Remplacez ces styles avec des utilitaires classiques (par exemple class="form-input rounded-lg border-gray-300").

Consultez Plugins pour la directive @plugin et les détails du chargement.