Guide pratique pour styliser les formulaires avec Tailwind CSS

Les formulaires sont essentiels pour l’interaction utilisateur, mais les styliser de manière cohérente peut s’avérer difficile. Tailwind CSS offre une approche utility-first qui rend le stylisme des formulaires plus intuitif et efficace. Ce guide vous accompagnera dans le stylisme des éléments de formulaire courants avec Tailwind, des champs de saisie de base aux formulaires responsives complets.
Points clés à retenir
- Utilisez un padding, des bordures et des états de focus cohérents sur tous les éléments de formulaire
- Groupez les éléments de formulaire liés avec un espacement approprié
- Exploitez les utilitaires responsives de Tailwind pour des formulaires adaptatifs
- Stylisez les états de validation avec des retours codés par couleur
- Considérez l’installation du plugin @tailwindcss/forms pour de meilleurs paramètres par défaut
- Utilisez les variantes dark mode pour des formulaires adaptés à la nuit
Débuter avec le stylisme de formulaires Tailwind
Avant de plonger dans les éléments de formulaire spécifiques, assurez-vous d’avoir Tailwind CSS installé dans votre projet :
npm install tailwindcss
npx tailwindcss init
Bien que non requis, le plugin officiel @tailwindcss/forms fournit un meilleur stylisme par défaut pour les éléments de formulaire :
npm install @tailwindcss/forms
Puis ajoutez-le à votre tailwind.config.js
:
module.exports = {
plugins: [
require('@tailwindcss/forms'),
],
}
Styliser les éléments de formulaire de base
Champs de saisie
Les champs de saisie de texte sont les éléments de formulaire les plus courants. Voici comment les styliser avec Tailwind :
<input
type="text"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="Enter your name"
/>
Cela crée un champ de saisie avec :
- Largeur complète (
w-full
) - Padding sur tous les côtés (
px-3 py-2
) - Bordure grise (
border border-gray-300
) - Coins arrondis (
rounded-md
) - Anneau et bordure bleus au focus (
focus:ring-2 focus:ring-blue-500 focus:border-blue-500
)
Labels
Les labels correctement stylisés améliorent l’utilisabilité et l’accessibilité des formulaires :
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">
Email Address
</label>
Listes déroulantes
Les listes déroulantes peuvent être stylisées de manière similaire aux champs de saisie de texte :
<select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option>Select an option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
Cases à cocher et boutons radio
Le stylisme des cases à cocher et boutons radio nécessite une approche différente :
<div class="flex items-center">
<input
type="checkbox"
id="terms"
class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
/>
<label for="terms" class="ml-2 text-sm text-gray-700">
I agree to the terms and conditions
</label>
</div>
Pour les boutons radio, changez simplement type="checkbox"
en type="radio"
et supprimez la classe rounded
.
Zone de texte
Pour la saisie de texte multi-ligne :
<textarea
rows="4"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="Enter your message"
></textarea>
Boutons
Les boutons de soumission de formulaire doivent se démarquer :
<button
type="submit"
class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
>
Submit
</button>
Construire un formulaire de contact complet
Assemblons tout pour créer un formulaire de contact responsive :
<form class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
<h2 class="text-xl font-bold mb-6 text-gray-800">Contact Us</h2>
<!-- Name field -->
<div class="mb-4">
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">
Name
</label>
<input
type="text"
id="name"
name="name"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="Your name"
required
/>
</div>
<!-- Email field -->
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">
Email
</label>
<input
type="email"
id="email"
name="email"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="your.email@example.com"
required
/>
</div>
<!-- Message field -->
<div class="mb-6">
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">
Message
</label>
<textarea
id="message"
name="message"
rows="4"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="Your message"
required
></textarea>
</div>
<!-- Submit button -->
<button
type="submit"
class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
>
Send Message
</button>
</form>
Modèles de mise en page de formulaires
Formulaires en ligne
Les formulaires en ligne sont parfaits pour les champs de saisie simples comme les barres de recherche :
<form class="flex items-center space-x-2">
<input
type="text"
class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="Search"
/>
<button
type="submit"
class="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
>
Search
</button>
</form>
Formulaires en grille
Pour les formulaires avec plusieurs colonnes, utilisez les utilitaires de grille de Tailwind :
<form class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="mb-4">
<label for="firstName" class="block text-sm font-medium text-gray-700 mb-1">
First Name
</label>
<input
type="text"
id="firstName"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
</div>
<div class="mb-4">
<label for="lastName" class="block text-sm font-medium text-gray-700 mb-1">
Last Name
</label>
<input
type="text"
id="lastName"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
</div>
<div class="md:col-span-2 mb-4">
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">
Email
</label>
<input
type="email"
id="email"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
</div>
<div class="md:col-span-2">
<button
type="submit"
class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
>
Submit
</button>
</div>
</form>
Stylisme de validation de formulaires
Tailwind ne fournit pas de classes intégrées pour les états de validation, mais vous pouvez les créer :
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">
Email
</label>
<input
type="email"
id="email"
class="w-full px-3 py-2 border border-red-500 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500"
placeholder="your.email@example.com"
/>
<p class="mt-1 text-sm text-red-600">Please enter a valid email address</p>
</div>
Pour les états de succès, utilisez les variantes vertes :
<input
type="text"
class="w-full px-3 py-2 border border-green-500 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"
/>
<p class="mt-1 text-sm text-green-600">Looks good!</p>
Rendre les formulaires responsives
Les préfixes responsives de Tailwind facilitent l’adaptation des formulaires aux différentes tailles d’écran :
<form class="p-4 md:p-6 lg:p-8">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<!-- Form fields -->
</div>
<div class="mt-6">
<button
type="submit"
class="w-full sm:w-auto bg-blue-600 text-white py-2 px-4 rounded-md"
>
Submit
</button>
</div>
</form>
Support du mode sombre
Ajoutez des variantes de mode sombre à vos éléments de formulaire :
<form class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<label class="block text-gray-700 dark:text-gray-200 mb-1">
Name
</label>
<input
type="text"
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md"
/>
</form>
FAQ
Non, mais il fournit un meilleur stylisme par défaut pour les éléments de formulaire et réduit la quantité de classes utilitaires que vous devez écrire.
Tailwind ne gère pas la logique de validation, seulement le stylisme. Utilisez les attributs de validation HTML5 (`required`, `pattern`, etc.) ou des bibliothèques de validation JavaScript, puis appliquez les classes Tailwind de manière conditionnelle.
Oui, vous pouvez extraire les modèles répétés en composants si vous utilisez un framework comme React, Vue ou Angular, ou utiliser la directive `@apply` de Tailwind en CSS pour créer des styles d'éléments de formulaire réutilisables.
Assurez-vous d'un étiquetage approprié avec les attributs `for`, utilisez les attributs ARIA appropriés, maintenez un contraste de couleur suffisant et testez la navigation au clavier. Les classes utilitaires de Tailwind n'affectent pas directement l'accessibilité.
Utilisez l'option purge de Tailwind dans votre configuration pour supprimer les styles inutilisés dans les builds de production. Cela réduit significativement la taille du fichier CSS final.
Conclusion
Tailwind CSS fournit un système puissant et flexible pour styliser les formulaires. En utilisant ses classes utilitaires de manière cohérente, vous pouvez créer des formulaires visuellement attrayants et fonctionnels qui s’adaptent aux différentes tailles d’écran et préférences utilisateur. Les exemples de ce guide servent de fondation sur laquelle vous pouvez construire pour répondre aux exigences spécifiques de votre projet.