Tailwind CSS Generator
Genera classi Tailwind CSS da impostazioni visuali - spacing, colori, tipografia.
Configurazione
Breakpoint
Display
Flexbox
Spacing
Tipografia
Colori
Border
Effetti
Anteprima
L'anteprima visiva richiede Tailwind CDN. Le classi generate sono comunque corrette.
Classi Generate
p-4Incolla nel tuo HTML: class="p-4"
Come utilizzare Tailwind CSS Generator
Imposta breakpoint e display
Scegli il prefisso responsive (base, sm, md, lg, xl) e il tipo di display (block, flex, grid...) da applicare all'elemento.
Configura spacing, tipografia e colori
Regola padding, margin, dimensione e peso del testo, colori di testo e sfondo scegliendo colore e tonalita' dalla palette Tailwind.
Aggiungi bordi ed effetti
Imposta larghezza e raggio dei bordi, ombra, opacita', posizionamento e overflow: ogni scelta aggiorna in tempo reale la stringa di classi.
Copia le classi generate
Clicca "Copia classi" per copiare la stringa completa e incollarla nell'attributo class del tuo HTML o componente.
Suggerimenti
- Costruisci prima il layout (display, flex, spacing) e solo dopo rifinisci colori ed effetti: e' piu' facile leggere l'ordine delle classi generate.
- Usa i chip attivi come riferimento visivo: la classe evidenziata corrisponde esattamente a quella inserita nella stringa finale.
- Se il tuo progetto usa un tema custom con colori rinominati, sostituisci manualmente i nomi colore (es. slate, blue) generati con quelli del tuo tailwind.config.
Domande frequenti
Il tool genera codice CSS o solo classi Tailwind?
Genera esclusivamente stringhe di classi utility Tailwind CSS (es. flex justify-center p-4), non CSS custom. Le classi vanno usate in un progetto che ha Tailwind gia' configurato.
Perche' l'anteprima visiva non mostra lo stile reale?
L'anteprima nella pagina non carica il CDN Tailwind per motivi di performance e CSP, quindi mostra un box generico. Le classi generate nel testo sono comunque corrette e funzionanti nel tuo progetto.
Posso combinare piu' breakpoint sulla stessa classe?
Il tool applica un prefisso responsive alla volta a tutte le classi generate. Per combinazioni multi-breakpoint (es. flex su mobile e grid su desktop), genera due set separati e uniscili manualmente nel tuo HTML.
Che versione di Tailwind CSS copre il generatore?
Le utility (spacing, colori, flex, grid, shadow, border) seguono la nomenclatura standard di Tailwind CSS v3/v4. Se il tuo progetto usa una configurazione custom con classi rinominate, verifica la corrispondenza nel tuo tailwind.config.
Come faccio a resettare la configurazione?
Usa il pulsante "Reset" in alto nel pannello di configurazione: riporta tutte le opzioni ai valori di default senza ricaricare la pagina.