Estrai ed esporta
Export in Tailwind
Esporta una sezione di un sito in HTML + Tailwind o React + Tailwind. Le media query diventano min-[]/max-[], gli stati hover:, !important diventa !.
Aggiornata il 20 ottobre 2026
L’export Tailwind trasforma una sezione di qualsiasi sito in markup con classi Tailwind, pronto per un progetto Tailwind senza un foglio di stile a parte. Lo ottieni come HTML + Tailwind o React + Tailwind.
Come esportare una sezione in Tailwind
-
Apri l’inspector con Alt+I e fai clic sulla sezione o sul componente che ti serve.
-
Scegli HTML + Tailwind o React + Tailwind nella finestra di export.
-
Controlla l’anteprima isolata a 375, 768, 1024 e 1280 px per verificare che i breakpoint siano arrivati.
-
Copia il codice o scarica i file.
Come il CSS diventa classi Tailwind
Pickode parte dal CSS scritto dall’autore, non dai valori calcolati, e traduce ogni regola in Tailwind con valori arbitrari. Nelle classi trovi i valori veri del sito, non il gradino più vicino della scala predefinita.
| Nel CSS dell’autore | Nell’export Tailwind |
|---|---|
| Qualsiasi valore (dimensioni, colori, spaziature…) | Valori arbitrari presi dal CSS dell’autore |
| Media query | Varianti min-[]: e max-[]: |
Stati come :hover |
Varianti di stato come hover: |
!important |
Il modificatore ! |
Visto che le media query diventano varianti sulle classi stesse, il comportamento responsive resta nel markup: non devi rifare i breakpoint a mano. Le variabili (var()) vengono risolte con il valore del sito e gli URL relativi diventano assoluti, come negli altri formati.
HTML + Tailwind o React + Tailwind?
| Formato | Quando usarlo |
|---|---|
| HTML + Tailwind | Pagine statiche, template, qualsiasi framework in cui incolli markup |
| React + Tailwind | Un componente JSX per un progetto React che usa già Tailwind |
Se vuoi portarti dietro anche il design system del sito, esporta i design token come @theme di Tailwind v4 o tailwind.config.js.
Free e Pro
Limiti
Correlati
Ancora bloccato?Contattaci