Générateur de Composants React Tailwind - Aperçu en Direct & Générateur de Code

Qu’est-ce que le générateur de composants React avec Tailwind et aperçu en direct ?

Le générateur de composants React avec Tailwind est un outil gratuit accessible dans le navigateur. Il génère un composant React stylisé avec Tailwind CSS. L’utilisateur choisit un type de composant, comme un bouton ou un champ de saisie, ajuste quelques options de style, puis l’outil affiche un aperçu en direct à côté du code JSX correspondant. Tout s’exécute dans le navigateur. Aucun compte ni appel à un serveur n’est nécessaire.

Types de composants

L’outil peut générer cinq types de composants :

• Bouton — un bouton cliquable avec un texte personnalisé
• Champ de saisie — un champ de formulaire sur une seule ligne avec un texte indicatif
• Zone de texte — un champ de formulaire multiligne avec un nombre défini de lignes
• Liste déroulante — une liste déroulante créée à partir d’une liste d’options
• Fil d’Ariane — une ligne de liens indiquant l’emplacement d’une page dans un site, par exemple Accueil / Produits / Catégorie

Propriétés modifiables

Cinq propriétés de style s’appliquent à tous les types de composants :

• Couleur du texte — blanc, noir, gris, bleu, rouge ou vert
• Couleur d’arrière-plan — aucune, blanc, gris clair, bleu, rouge ou vert
• Espacement interne — aucun, petit, moyen, grand ou valeur par défaut du bouton
• Rayon de bordure — aucun, petit, moyen, grand ou complètement arrondi
• Largeur — automatique, pleine, moitié, tiers ou quart

Certaines propriétés n’apparaissent que pour certains types de composants : le texte du bouton, le texte indicatif d’un champ de saisie ou d’une zone de texte, le nombre de lignes d’une zone de texte, la liste d’options d’une liste déroulante et la liste d’éléments d’un fil d’Ariane. Les champs de saisie, les zones de texte et les listes déroulantes disposent également de cases à cocher « obligatoire » et « désactivé » ; les boutons disposent aussi d’une case à cocher « désactivé ».

Quatre propriétés sont fixes et ne peuvent pas être modifiées depuis l’interface : la marge, toujours m-0, le style de bordure, toujours border border-transparent, la taille de police, toujours text-base, et l’épaisseur de police, toujours font-medium. Chaque composant généré contient ces quatre mêmes classes. Pour utiliser une autre marge, bordure ou taille de police, il faut modifier manuellement le code copié.

Construction de la liste des classes générées

L’outil construit la chaîne de classes Tailwind de chaque composant dans un ordre fixe :

1. La classe de couleur du texte, si une couleur est définie
2. La classe de couleur d’arrière-plan, si une couleur est définie
3. Les classes d’espacement interne, de marge, de bordure et de rayon de bordure
4. La classe de largeur, sauf si la largeur est définie sur « automatique »
5. Les classes fixes de taille et d’épaisseur de police
6. Les classes des états interactifs (survol, focus, activation), qui varient selon le type de composant
7. Les classes de l’état désactivé, si l’option « désactivé » est cochée

Les boutons reçoivent hover:bg-opacity-90, focus:ring-2, focus:ring-offset-2 et focus:ring-blue-500. Un bouton qui n’est pas désactivé reçoit également cursor-pointer. Les champs de saisie, les zones de texte et les listes déroulantes reçoivent à la place focus:outline-none, focus:ring-2, focus:ring-blue-500 et focus:border-blue-500. Les fils d’Ariane ne reçoivent aucune de ces classes interactives, et l’état désactivé ne s’applique jamais à un fil d’Ariane, puisqu’une liste de navigation ne peut pas être désactivée.

Exemple : bouton

Avec les réglages par défaut (texte blanc, arrière-plan blue-500, espacement interne moyen et angles arrondis), l’outil produit :

Exemple : champ de saisie

Avec du texte gris, un arrière-plan blanc, un petit espacement interne, un grand rayon de bordure, une largeur pleine et l’option « obligatoire » cochée :

Exemple : zone de texte et liste déroulante

Les zones de texte et les listes déroulantes suivent la même règle de construction des classes que les champs de saisie. Voici une zone de texte avec du texte noir, un espacement interne moyen, des angles moyennement arrondis, une largeur pleine et 4 lignes :

Voici une liste déroulante avec les mêmes couleurs et le même espacement que dans l’exemple du champ de saisie ci-dessus, ainsi que trois options :

Exemple : fil d’Ariane

Les liens et les séparateurs d’un fil d’Ariane utilisent toujours des classes fixes (hover:text-blue-600 sur les liens et mx-2 text-gray-400 sur le séparateur « / »). Seule la liste externe reçoit les cinq propriétés de style communes. Avec du texte gris et sans espacement interne ni angles arrondis :

Aperçu responsive et classes responsive

L’outil propose un contrôle « Vue responsive » avec trois options : mobile, tablette et ordinateur. Le passage d’une option à l’autre modifie uniquement la largeur de la zone d’aperçu, afin de voir approximativement l’apparence d’un composant sur un écran plus étroit. Il n’ajoute aucun préfixe de point d’arrêt responsive de Tailwind, comme sm:, md:, lg: ou xl:, au code généré. La sortie JSX reste identique quelle que soit la vue responsive sélectionnée. Pour qu’un composant ait une apparence différente selon la largeur de l’écran, il faut ajouter soi-même ces classes de point d’arrêt au code copié.

Ajouter Tailwind CSS à un projet React

1. Installer les paquets : npm install -D tailwindcss postcss autoprefixer
2. Configurer les fichiers nécessaires : npx tailwindcss init -p
3. Répertorier les fichiers source du projet dans la section content de tailwind.config.js
4. Ajouter les trois directives Tailwind au fichier CSS principal : @tailwind base; @tailwind components; @tailwind utilities;
5. Coller un composant généré dans un fichier React

Foire aux questions

Que fait le générateur de composants React avec Tailwind ?
Il génère un composant React stylisé ainsi que les classes Tailwind CSS correspondantes, et affiche un aperçu en direct pendant que l’utilisateur ajuste les réglages.

L’outil ajoute-t-il automatiquement des classes de point d’arrêt responsive comme sm: ou md: ?
Non. Le contrôle mobile/tablette/ordinateur redimensionne uniquement la zone d’aperçu. Le code exporté ne contient aucune classe sm:, md:, lg: ou xl: ; il faut les ajouter manuellement si nécessaire.

Puis-je modifier la marge, le style de bordure ou la taille de police ?
Pas depuis l’interface. Chaque composant généré utilise la même marge fixe (m-0), la même bordure (border border-transparent), la même taille de police (text-base) et la même épaisseur de police (font-medium). Ces propriétés doivent être modifiées directement dans le code copié.

L’outil enregistre-t-il mes composants ?
Non. Il ne possède aucune fonction d’enregistrement. Il faut copier le code généré et le conserver dans les propres fichiers du projet.

Génère-t-il du TypeScript ?
L’outil produit du JSX (syntaxe JavaScript). La sortie est un balisage JSX standard qui peut être collé sans modification dans un fichier .tsx, même si aucune définition de type n’est générée.

L’outil est-il gratuit ?
Oui. Il s’exécute entièrement dans le navigateur, sans compte et sans requête envoyée à un serveur.

Fonctionne-t-il avec Next.js, Gatsby ou d’autres frameworks React ?
Oui. Le code généré est du JSX standard avec des classes Tailwind. Il fonctionne donc avec tout framework basé sur React dans lequel Tailwind CSS est configuré.