Back

Guide pratique pour styliser les formulaires avec Tailwind CSS

OpenReplay Team OpenReplay Team

Jun 18, 2025 · 5 min read

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.

Listen to your bugs 🧘, with OpenReplay

See how users use your app and resolve issues fast.
Self-Host Try Cloud Free
Loved by thousands of developers

More articles from OpenReplay Blog