Generador de Components React Tailwind - Vista Prèvia en Viu i Generador de Codi

Què és el constructor de components React amb Tailwind?

El constructor de components React amb Tailwind és una eina gratuïta del navegador que genera un component React amb estils de Tailwind CSS. L’usuari tria un tipus de component, com ara un botó o un camp d’entrada de text, ajusta algunes opcions d’estil i l’eina mostra una previsualització en directe al costat del codi JSX corresponent. Tot s’executa al navegador. No cal cap compte ni cap crida al servidor.

Tipus de components

L’eina pot generar cinc tipus de components:

• Botó — un botó clicable amb text personalitzat
• Entrada de text — un camp de formulari d’una sola línia amb text de marcador de posició
• Àrea de text — un camp de formulari de diverses línies amb un nombre determinat de files
• Selector — una llista desplegable creada a partir d’una llista d’opcions
• Fil d’Ariadna — una fila d’enllaços que mostra la ubicació d’una pàgina dins d’un lloc web, com ara Inici / Productes / Categoria

Quines propietats es poden canviar

Cinc propietats d’estil s’apliquen a tots els tipus de components:

• Color del text — blanc, negre, gris, blau, vermell o verd
• Color de fons — cap, blanc, gris clar, blau, vermell o verd
• Farciment (espaiat interior) — cap, petit, mitjà, gran o el valor predeterminat del botó
• Radi de la vora (arrodoniment de les cantonades) — cap, petit, mitjà, gran o completament arrodonit
• Amplada — automàtica, completa, la meitat, un terç o un quart

Algunes propietats només apareixen per a determinats tipus de components: el text del botó, el text de marcador de posició d’una entrada de text o una àrea de text, el nombre de files d’una àrea de text, la llista d’opcions d’un selector i la llista d’elements d’un fil d’Ariadna. Les entrades de text, les àrees de text i els selectors també tenen caselles de selecció «obligatori» i «desactivat»; els botons també tenen una casella de selecció «desactivat».

Quatre propietats són fixes i no es poden canviar mitjançant la interfície: el marge (sempre m-0), l’estil de la vora (sempre border border-transparent), la mida de la lletra (sempre text-base) i el gruix de la lletra (sempre font-medium). Tots els components generats porten aquestes mateixes quatre classes. Per utilitzar un marge, una vora o una mida de lletra diferents, cal editar manualment el codi copiat.

Com es construeix la llista de classes generada

L’eina construeix la cadena de classes de Tailwind per a cada component en un ordre fix:

1. Classe de color del text, si n’hi ha una de definida
2. Classe de color de fons, si n’hi ha una de definida
3. Classes de farciment, marge, vora i radi de la vora
4. Classe d’amplada, tret que l’amplada sigui «automàtica»
5. Les classes fixes de mida i gruix de la lletra
6. Classes per als estats interactius (en passar-hi per sobre, enfocament i actiu), que varien segons el tipus de component
7. Classes per a l’estat desactivat, si se selecciona «desactivat»

Els botons reben hover:bg-opacity-90, focus:ring-2, focus:ring-offset-2 i focus:ring-blue-500. Un botó que no està desactivat també rep cursor-pointer. Les entrades de text, les àrees de text i els selectors reben, en canvi, focus:outline-none, focus:ring-2, focus:ring-blue-500 i focus:border-blue-500. Els fils d’Ariadna no reben cap d’aquestes classes interactives, i l’estat desactivat no s’hi aplica mai, ja que una llista de navegació no es pot desactivar.

Exemple: botó

Amb la configuració predeterminada (text blanc, fons blau-500, farciment mitjà i cantonades arrodonides), l’eina genera:

Exemple: entrada de text

Amb text gris, fons blanc, farciment petit, radi de vora gran, amplada completa i «obligatori» seleccionat:

Exemple: àrea de text i selector

Les àrees de text i els selectors segueixen la mateixa regla de construcció de classes que les entrades de text. Una àrea de text amb text negre, farciment mitjà, arrodoniment mitjà, amplada completa i 4 files:

Un selector amb els mateixos colors i espaiat que l’exemple d’entrada de text anterior, i tres opcions:

Exemple: fil d’Ariadna

Els enllaços i els separadors del fil d’Ariadna sempre utilitzen classes fixes (hover:text-blue-600 als enllaços i mx-2 text-gray-400 al separador «/»). Només la llista exterior rep les cinc propietats d’estil compartides. Amb text gris i sense farciment ni arrodoniment:

Previsualització adaptativa i classes adaptatives

L’eina té un control «Vista adaptativa» amb tres opcions: mòbil, tauleta i escriptori. Canviar entre aquestes opcions només modifica l’amplada de la caixa de previsualització, de manera que es pot veure aproximadament quin aspecte tindria un component en una pantalla més estreta. No afegeix cap prefix de punt d’interrupció de Tailwind, com ara sm:, md:, lg: o xl:, al codi generat. La sortida JSX és la mateixa independentment de la vista adaptativa seleccionada. Qui necessiti que un component tingui un aspecte diferent segons l’amplada de la pantalla ha d’afegir manualment aquestes classes de punt d’interrupció al codi copiat.

Com afegir Tailwind CSS a un projecte React

1. Instal·leu els paquets: npm install -D tailwindcss postcss autoprefixer
2. Configureu els fitxers de configuració: npx tailwindcss init -p
3. Enumereu els fitxers font del projecte a tailwind.config.js, dins de content
4. Afegiu les tres directives de Tailwind al fitxer CSS principal: @tailwind base; @tailwind components; @tailwind utilities;
5. Enganxeu un component generat en un fitxer React

Preguntes freqüents

Què fa el constructor de components React amb Tailwind? Genera un component React amb estils i les classes de Tailwind CSS corresponents, i mostra una previsualització en directe mentre l’usuari ajusta la configuració.

L’eina afegeix automàticament classes de punts d’interrupció adaptatius com sm: o md:? No. El control mòbil/tauleta/escriptori només canvia la mida de la caixa de previsualització. El codi exportat no té classes sm:, md:, lg: ni xl:; cal afegir-les manualment si són necessàries.

Puc canviar el marge, l’estil de la vora o la mida de la lletra? No mitjançant la interfície. Tots els components generats utilitzen el mateix marge fix (m-0), la mateixa vora (border border-transparent), la mateixa mida de lletra (text-base) i el mateix gruix de lletra (font-medium). Canvieu-los editant directament el codi copiat.

L’eina desa els meus components? No. No hi ha cap funció per desar-los. Copieu el codi generat i deseu-lo als fitxers del mateix projecte.

Genera TypeScript? L’eina genera JSX (sintaxi de JavaScript). La sortida és marcatge JSX normal, de manera que es pot enganxar en un fitxer .tsx sense canvis, tot i que no es generen definicions de tipus.

L’eina és gratuïta? Sí. S’executa íntegrament al navegador, sense cap compte i sense enviar cap sol·licitud a un servidor.

Funciona amb Next.js, Gatsby o altres marcs de React? Sí. El codi generat és JSX normal amb classes de Tailwind, de manera que funciona amb qualsevol marc basat en React que tingui Tailwind CSS configurat.