Generatore di Componenti React Tailwind - Anteprima Live e Generatore di Codice

Che cos'è il React Tailwind Component Builder?

Il React Tailwind Component Builder è uno strumento gratuito per browser che genera un componente React con stili Tailwind CSS. Si sceglie un tipo di componente, ad esempio un pulsante o un campo di testo, si regolano alcune opzioni di stile e lo strumento mostra un'anteprima dal vivo accanto al codice JSX corrispondente. Tutto viene eseguito nel browser. Non servono un account né richieste al server.

Tipi di componenti

Lo strumento può generare cinque tipi di componenti:

• Pulsante — un pulsante cliccabile con testo personalizzato
• Campo di testo — un campo di modulo a riga singola con testo segnaposto
• Area di testo — un campo di modulo multilinea con un numero di righe impostato
• Elenco a discesa — un elenco a discesa creato da una lista di opzioni
• Breadcrumb — una riga di link che mostra la posizione di una pagina all'interno di un sito, ad esempio Home / Prodotti / Categoria

Quali proprietà si possono modificare

Cinque proprietà di stile si applicano a ogni tipo di componente:

• Colore del testo — bianco, nero, grigio, blu, rosso o verde
• Colore di sfondo — nessuno, bianco, grigio chiaro, blu, rosso o verde
• Spaziatura interna — nessuna, piccola, media, grande o quella predefinita del pulsante
• Raggio del bordo — nessuno, piccolo, medio, grande o completamente arrotondato
• Larghezza — automatica, intera, metà, un terzo o un quarto

Alcune proprietà compaiono solo per determinati tipi di componente: il testo del pulsante, il testo segnaposto di un campo di testo o di un'area di testo, il numero di righe di un'area di testo, l'elenco delle opzioni di un elenco a discesa e l'elenco degli elementi di un breadcrumb. I campi di testo, le aree di testo e gli elenchi a discesa hanno anche le caselle di controllo «obbligatorio» e «disabilitato»; anche i pulsanti hanno una casella di controllo «disabilitato».

Quattro proprietà sono fisse e non possono essere modificate tramite l'interfaccia: il margine (sempre m-0), lo stile del bordo (sempre border border-transparent), la dimensione del carattere (sempre text-base) e il peso del carattere (sempre font-medium). Ogni componente generato contiene queste stesse quattro classi. Per usare un margine, un bordo o una dimensione del carattere diversi, è necessario modificare manualmente il codice copiato.

Come viene creato l'elenco delle classi generate

Lo strumento crea la stringa di classi Tailwind per ogni componente in un ordine fisso:

1. Classe del colore del testo, se impostata
2. Classe del colore di sfondo, se impostata
3. Classi della spaziatura interna, del margine, del bordo e del raggio del bordo
4. Classe della larghezza, a meno che la larghezza non sia impostata su «automatica»
5. Classi fisse della dimensione e del peso del carattere
6. Classi per gli stati interattivi (hover, focus, active), che variano in base al tipo di componente
7. Classi per lo stato disabilitato, se «disabilitato» è selezionato

I pulsanti ricevono hover:bg-opacity-90, focus:ring-2, focus:ring-offset-2 e focus:ring-blue-500. Un pulsante non disabilitato riceve anche cursor-pointer. I campi di testo, le aree di testo e gli elenchi a discesa ricevono invece focus:outline-none, focus:ring-2, focus:ring-blue-500 e focus:border-blue-500. I breadcrumb non ricevono nessuna di queste classi interattive e lo stato disabilitato non si applica mai a un breadcrumb, perché un elenco di navigazione non può essere disabilitato.

Esempio: pulsante

Con le impostazioni predefinite (testo bianco, sfondo blu-500, spaziatura interna media, angoli arrotondati) lo strumento produce:

Esempio: campo di testo

Con testo grigio, sfondo bianco, spaziatura interna piccola, raggio del bordo grande, larghezza intera e «obbligatorio» selezionato:

Esempio: area di testo ed elenco a discesa

Le aree di testo e gli elenchi a discesa seguono la stessa regola di creazione delle classi dei campi di testo. Un'area di testo con testo nero, spaziatura interna media, raggio del bordo medio, larghezza intera e 4 righe:

Un elenco a discesa con gli stessi colori e la stessa spaziatura dell'esempio del campo di testo precedente, e tre opzioni:

Esempio: breadcrumb

I link e i separatori dei breadcrumb usano sempre classi fisse (hover:text-blue-600 sui link, mx-2 text-gray-400 sul separatore «/»). Solo l'elenco esterno riceve le cinque proprietà di stile condivise. Con testo grigio e senza spaziatura interna né angoli arrotondati:

Anteprima reattiva e classi reattive

Lo strumento dispone di un controllo «Visualizzazione reattiva» con tre opzioni: mobile, tablet e desktop. Il passaggio da un'opzione all'altra modifica solo la larghezza del riquadro di anteprima, così si può vedere approssimativamente l'aspetto del componente su uno schermo più stretto. Non aggiunge al codice generato alcun prefisso di breakpoint Tailwind, come sm:, md:, lg: o xl:. L'output JSX è identico indipendentemente dalla visualizzazione reattiva selezionata. Chi ha bisogno che un componente appaia diverso a larghezze dello schermo diverse deve aggiungere manualmente quelle classi di breakpoint al codice copiato.

Come aggiungere Tailwind CSS a un progetto React

1. Installa i pacchetti: npm install -D tailwindcss postcss autoprefixer
2. Configura i file di configurazione: npx tailwindcss init -p
3. Elenca i file sorgente del progetto in tailwind.config.js sotto content
4. Aggiungi le tre direttive Tailwind al file CSS principale: @tailwind base; @tailwind components; @tailwind utilities;
5. Incolla un componente generato in un file React

Domande frequenti

Che cosa fa il React Tailwind Component Builder? Genera un componente React con stili e le classi Tailwind CSS corrispondenti, mostrando un'anteprima dal vivo mentre si regolano le impostazioni.

Lo strumento aggiunge automaticamente classi di breakpoint reattive come sm: o md:? No. Il controllo mobile/tablet/desktop ridimensiona solo il riquadro di anteprima. Il codice esportato non contiene classi sm:, md:, lg: o xl:; se servono, devono essere aggiunte manualmente.

È possibile modificare il margine, lo stile del bordo o la dimensione del carattere? Non tramite l'interfaccia. Ogni componente generato usa lo stesso margine fisso (m-0), bordo (border border-transparent), dimensione del carattere (text-base) e peso del carattere (font-medium). Per modificarli, è necessario intervenire direttamente sul codice copiato.

Lo strumento salva i miei componenti? No. Non è disponibile alcuna funzione di salvataggio. Copia il codice generato e conservalo nei file del progetto.

Genera TypeScript? Lo strumento produce JSX (sintassi JavaScript). L'output è semplice markup JSX, quindi può essere incollato in un file .tsx senza modifiche, anche se non vengono generate definizioni di tipo.

Lo strumento è gratuito? Sì. Viene eseguito interamente nel browser, senza account e senza inviare richieste a un server.

Funziona con Next.js, Gatsby o altri framework React? Sì. Il codice generato è semplice JSX con classi Tailwind, quindi funziona con qualsiasi framework basato su React in cui Tailwind CSS sia configurato.