tailwindcss forms
v0.5.9
Un plugin qui fournit une réinitialisation de base pour les styles de formulaire qui facilite le remplacement des éléments de formulaire avec des utilitaires.
Installez le plugin depuis npm :
npm install -D @tailwindcss/forms
Ajoutez ensuite le plugin à votre fichier tailwind.config.js :
// tailwind.config.jsmodule.exports = {
thème: {// ...
},
plugins : [require('@tailwindcss/forms'),// ...
],}Voir la démo en direct
Tous les éléments de formulaire de base que vous utilisez auront désormais des styles par défaut simples qui sont faciles à remplacer avec des utilitaires.
Actuellement, nous ajoutons des styles de formulaire de base conviviaux pour les types d'éléments de formulaire suivants :
input[type='text']
input[type='password']
input[type='email']
input[type='number']
input[type='url']
input[type='date']
input[type='datetime-local']
input[type='month']
input[type='week']
input[type='time']
input[type='search']
input[type='tel']
input[type='checkbox']
input[type='radio']
select
select[multiple]
textarea
Chaque élément a été normalisé/réinitialisé dans un style simple et visuellement cohérent, facile à personnaliser avec des utilitaires, même des éléments comme <select> ou <input type="checkbox"> qui doivent normalement être réinitialisés avec appearance: none et personnalisés à l'aide de custom CSS :
<!-- Vous pouvez désormais personnaliser le remplissage d'un élément sélectionné : --><select class="rounded-full px-4 py-3"> <!-- ... --></select><!-- Ou modifiez la couleur d'une case à cocher à l'aide des utilitaires de couleur de texte : --><input type="checkbox" class="rounded text-pink-500" />
D'autres exemples de personnalisation et de bonnes pratiques seront bientôt disponibles.
En plus des styles globaux, nous générons également un ensemble de classes correspondantes qui peuvent être utilisées pour appliquer explicitement les styles de formulaire à un élément. Cela peut être utile dans les situations où vous devez faire en sorte qu'un élément autre qu'un formulaire, tel qu'un <div> , ressemble à un élément de formulaire.
<input type="email" class="form-input arrondi-complet px-4 py-3" /><select class="form-select arrondi-complet px-4 py-3"> <!-- ... --></select><input type="checkbox" class="form-checkbox arrondi text-pink-500" />
Voici un tableau complet des classes form-* fournies pour référence :
| Base | Classe |
|---|---|
[type='text'] | form-input |
[type='email'] | form-input |
[type='url'] | form-input |
[type='password'] | form-input |
[type='number'] | form-input |
[type='date'] | form-input |
[type='datetime-local'] | form-input |
[type='month'] | form-input |
[type='search'] | form-input |
[type='tel'] | form-input |
[type='time'] | form-input |
[type='week'] | form-input |
textarea | form-textarea |
select | form-select |
select[multiple] | form-multiselect |
[type='checkbox'] | form-checkbox |
[type='radio'] | form-radio |
Bien que nous recommandons de considérer ce plugin comme une « réinitialisation de formulaire » plutôt que comme un ensemble de styles de composants de formulaire, dans certains cas, notre approche par défaut peut être trop lourde, en particulier lors de l'intégration de ce plugin dans des projets existants.
Si la génération des styles et des classes globaux (de base) ne fonctionne pas bien avec votre projet, vous pouvez utiliser l'option strategy pour limiter le plugin à une seule de ces approches.
// tailwind.config.jsplugins : [
require("@tailwindcss/forms")({strategy: 'base', // génère uniquement des styles globauxstrategy: 'class', // génère uniquement des classes
}),], Lors de l'utilisation de la stratégie base , les éléments du formulaire sont stylisés globalement et aucune classe form-{name} n'est générée.
Lors de l'utilisation de la stratégie class , les éléments de formulaire ne sont pas stylisés globalement, mais doivent plutôt être stylisés à l'aide des classes form-{name} générées.
