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

Qu’est-ce que le React Tailwind Component Builder ?

Le React Tailwind Component Builder est un outil gratuit, utilisable dans le navigateur, qui 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 d’une seule ligne avec un texte indicatif
• Zone de texte : un champ de formulaire multiligne avec un nombre de lignes défini
• Liste de sélection : une liste déroulante construite à partir d’une liste d’options
• Fil d’Ariane : une rangée 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
• Marge intérieure (espacement interne) : aucune, petite, moyenne, grande ou celle du bouton par défaut
• Rayon de bordure (arrondi des coins) : aucun, petit, moyen, grand ou entièrement arrondi
• Largeur : automatique, pleine, la moitié, le tiers ou le 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 des options d’une liste de sélection et la liste des éléments d’un fil d’Ariane. Les champs de saisie, les zones de texte et les listes de sélection ont aussi des cases à cocher « required » et « disabled » ; les boutons ont également une case « disabled ».

Quatre propriétés sont fixes et ne peuvent pas être modifiées depuis l’interface : la marge extérieure (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é porte ces mêmes quatre classes. Pour utiliser une autre marge, une autre bordure ou une autre taille de police, modifiez le code copié à la main.

Construction de la liste de classes générée

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

1. Classe de couleur du texte, si elle est définie
2. Classe de couleur d’arrière-plan, si elle est définie
3. Classes de marge intérieure, de marge extérieure, de bordure et de rayon de bordure
4. Classe de largeur, sauf si la largeur est réglée sur « auto »
5. Les classes fixes de taille et d’épaisseur de police
6. Classes des états interactifs (survol, focus, actif), qui varient selon le type de composant
7. Classes de l’état désactivé, si « disabled » est coché

Les boutons reçoivent hover:bg-opacity-90, focus:ring-2, focus:ring-offset-2 et focus:ring-blue-500. Un bouton non désactivé reçoit aussi cursor-pointer. Les champs de saisie, les zones de texte et les listes de sélection 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, car 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 bleu 500, marge intérieure par défaut du bouton py-2 px-4, arrondi moyen), l’outil produit :

Exemple : champ de saisie

Avec un texte gris, un arrière-plan blanc, une petite marge intérieure, un grand rayon de bordure, la pleine largeur et la case « required » cochée :

Exemple : zone de texte et liste de sélection

Les zones de texte et les listes de sélection suivent la même règle de construction des classes que les champs de saisie. Une zone de texte avec un texte noir, une marge intérieure moyenne, un arrondi moyen, la pleine largeur et 4 lignes :

Une liste de sélection avec les mêmes couleurs et la même marge intérieure que l’exemple du champ de saisie ci-dessus, un arrondi moyen, la pleine largeur, la case « required » cochée et 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, mx-2 text-gray-400 sur le séparateur « / »). Seule la liste extérieure reçoit les cinq propriétés de style communes. Avec un texte gris, sans marge intérieure ni arrondi :

Aperçu adaptatif et classes adaptatives

L’outil propose une commande « Responsive View » à trois options : mobile, tablette et ordinateur. Passer de l’une à l’autre ne modifie que la largeur de la zone d’aperçu, ce qui permet de voir à peu près l’aspect d’un composant sur un écran plus étroit. Elle n’ajoute aucun préfixe de point de rupture Tailwind, comme sm:, md:, lg: ou xl:, au code généré. Le code JSX produit est identique, quel que soit l’aperçu sélectionné. Quiconque veut qu’un composant s’affiche différemment selon la largeur d’écran doit ajouter lui-même ces classes de point de rupture au code copié.

Ajouter Tailwind CSS à un projet React

Les classes générées sont des classes de Tailwind CSS v3. Tailwind CSS v4 a supprimé les utilitaires bg-opacity-* et les directives @tailwind ; la classe hover:bg-opacity-90 du bouton n’a donc aucun effet dans un projet v4. La configuration v3 pour un projet Vite + React est la suivante :

1. Installez les paquets : npm install -D tailwindcss@3 postcss autoprefixer
2. Créez les fichiers de configuration : npx tailwindcss init -p
3. Indiquez les fichiers sources du projet dans tailwind.config.js, sous content
4. Ajoutez les trois directives Tailwind au fichier CSS principal : @tailwind base; @tailwind components; @tailwind utilities;
5. Collez un composant généré dans un fichier React

Foire aux questions

Que fait le React Tailwind Component Builder ? Il génère un composant React stylisé et 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 de rupture comme sm: ou md: ? Non. La commande mobile/tablette/ordinateur ne fait que redimensionner la zone d’aperçu. Le code exporté ne contient aucune classe sm:, md:, lg: ou xl: ; il faut les ajouter à la main 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 les mêmes valeurs fixes : marge (m-0), bordure (border border-transparent), taille de police (text-base) et épaisseur de police (font-medium). Modifiez-les directement dans le code copié.

L’outil enregistre-t-il mes composants ? Non. Il n’y a pas de fonction d’enregistrement. Copiez le code généré et conservez-le dans les fichiers du projet.

L’outil génère-t-il du TypeScript ? L’outil produit du JSX (une syntaxe JavaScript). Le résultat est un simple balisage JSX, qui peut être collé sans modification dans un fichier .tsx, même si aucune définition de types 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 simple avec des classes Tailwind ; il fonctionne donc dans tout framework basé sur React où Tailwind CSS v3 est configuré.

Références

1. Tailwind Labs. Install Tailwind CSS with Vite (documentation v3). Install Tailwind CSS with Vite — npm install -D tailwindcss@3 postcss autoprefixer, npx tailwindcss init -p, les chemins content et les trois directives @tailwind.
2. Tailwind Labs. Responsive Design (documentation v3). Responsive Design — les préfixes de point de rupture par défaut sm, md, lg, xl et 2xl.
3. Tailwind Labs. Upgrade guide. Upgrading to Tailwind CSS v4 — la v4 supprime les directives @tailwind et les utilitaires obsolètes bg-opacity-*.