Quali proprietà CSS sono riconosciute?

Le scale di spacing per padding e margin, i colori di testo e sfondo, display, allineamento flex, dimensioni e pesi del font, border-radius, width e height, position e gap. Tutto il resto finisce in classe arbitraria [prop:value].

E se il valore non rientra nella scala standard?

Il convertitore emette notazione arbitraria come p-[13px] o bg-[#3b82f6]. JIT compila e la classe rimane Tailwind valido senza modifiche manuali.

Gestisce le variabili CSS personalizzate?

Sì. I valori con var(--token) escono tra parentesi; la variabile deve essere comunque dichiarata nel theme di tailwind.config oppure come custom property in :root.

La conversione è lossless?

Per i pattern comuni sì. Animazioni, gradienti e selettori esotici restano come classi arbitrarie — sopravvivono, ma forse vuoi tenere il CSS originale per loro.

Si può fare round-trip con Tailwind-to-CSS?

Quasi sempre. Le utility semplici tornano identiche; i valori arbitrari sopravvivono, ma le dichiarazioni non supportate restano in forma arbitraria anche al ritorno.

Viene caricato qualcosa?

No. L’intera conversione vive in questo tab; il contenuto del tuo foglio di stile non lascia la pagina.

CSS a Tailwind — dichiarazioni in utility

CSS → utility Tailwind

Privacy by design — tutto gira nel tuo browser

Incolla le dichiarazioni CSS a sinistra e copia le utility Tailwind a destra. Il convertitore mappa le scale standard di spacing, colore, tipografia e layout sulle utility native e ricorre alla notazione tra parentesi per i valori che Tailwind non conosce nativamente.

Proprietà mappabili

Il convertitore copre la superficie CSS quotidiana: spacing per padding e margin, dimensioni e pesi del font, colore (text e bg), display, direzione e allineamento flex, border-radius, width e height, position e gap. Ognuna trova il proprio shortcut canonico — p-4, text-lg, justify-between — quindi l’output legge come Tailwind scritto a mano.

Perché la notazione arbitraria conta

I codebase reali hanno valori senza shortcut: un font-size custom da 13px, un colore brand con hex specifico, un gap da 1.7rem. Quando il convertitore li incontra emette la forma arbitraria di Tailwind — text-[13px] o bg-[#3b82f6]. La classe resta Tailwind valido, JIT la compila e il round-trip con Tailwind-to-CSS funziona pulito.

Quando aspettarsi un passaggio diretto

Selettori complessi, animazioni, gradienti e keyframes non vengono convertiti di proposito — vivono in layer che Tailwind copre con plugin o @apply, e una mappatura euristica direbbe il falso sulla correttezza. Quelle dichiarazioni escono testuali dentro classi [prop:value], così le tieni in revisione senza perdere dati.

Domande frequenti

Quali proprietà CSS sono riconosciute?: Le scale di spacing per padding e margin, i colori di testo e sfondo, display, allineamento flex, dimensioni e pesi del font, border-radius, width e height, position e gap. Tutto il resto finisce in classe arbitraria [prop:value].
E se il valore non rientra nella scala standard?: Il convertitore emette notazione arbitraria come p-[13px] o bg-[#3b82f6]. JIT compila e la classe rimane Tailwind valido senza modifiche manuali.
Gestisce le variabili CSS personalizzate?: Sì. I valori con var(--token) escono tra parentesi; la variabile deve essere comunque dichiarata nel theme di tailwind.config oppure come custom property in :root.
La conversione è lossless?: Per i pattern comuni sì. Animazioni, gradienti e selettori esotici restano come classi arbitrarie — sopravvivono, ma forse vuoi tenere il CSS originale per loro.
Si può fare round-trip con Tailwind-to-CSS?: Quasi sempre. Le utility semplici tornano identiche; i valori arbitrari sopravvivono, ma le dichiarazioni non supportate restano in forma arbitraria anche al ritorno.
Viene caricato qualcosa?: No. L’intera conversione vive in questo tab; il contenuto del tuo foglio di stile non lascia la pagina.