Cosa viene convertito?

Le utility Tailwind comuni per spacing, colore, tipografia, flex e position, oltre a qualsiasi forma arbitraria [value] o [prop:value]. Le varianti non sono ancora supportate.

Perché chiede un selettore?

L’output è una singola regola CSS. Scegliendo il selettore puoi incollarla nel foglio di stile senza rinominare o reimpacchettare.

Le varianti responsive e hover sono supportate?

Non ancora — richiedono wrapper di media query o pseudoclasse. Togli i prefissi md:, hover: e dark: prima di incollare; le utility base fanno round-trip pulito.

Conosce il mio tema Tailwind?

No. Usa la scala di default. Spacing o colori personalizzati finiscono in arbitrary, ma il CSS rimane funzionante.

Posso ripassare il CSS dal convertitore inverso?

Sì — sulle utility semplici il round-trip è esatto. I valori arbitrari sopravvivono; le dichiarazioni non supportate restano come classi arbitrarie.

I miei dati vengono caricati da qualche parte?

No. Tutta la conversione vive in questa scheda; Toova non vede le tue liste di classi, i selettori o l’output.

Tailwind a CSS — utility in una regola

Utility Tailwind → CSS

Privacy by design — tutto gira nel tuo browser

Incolla una lista di utility Tailwind insieme a un selettore e Toova costruisce la regola CSS corrispondente. Le classi arbitrarie come p-[13px] o [grid-template-columns:1fr_2fr] vengono svolte in dichiarazioni grezze, pronte da inserire in un foglio di stile.

Quando il percorso inverso serve

A volte prototipi in Tailwind ma devi consegnare CSS — una mail di marketing, un widget di terze parti, un passaggio a un CMS che non carica Tailwind. Il convertitore comprime la lista di utility in una sola regola con il selettore che scegli, pronta da incollare senza rinominare né ripulire il markup di playground.

Come ritornano i valori arbitrari

Le classi arbitrarie di Tailwind portano il valore inline: p-[13px] è padding: 13px e [grid-template-columns:1fr_2fr] è grid-template-columns: 1fr 2fr. Il convertitore svolge entrambe le forme letteralmente, così qualunque valore codificato in JIT sopravvive senza tabelle aggiuntive.

Limiti e round-trip

Le varianti responsive (md:flex), di stato (hover:bg-black) e dark mode (dark:text-white) richiedono wrapper di media query o pseudoclasse, perciò il convertitore non le emette ancora — rimuovile prima di incollare. I token di tema (text-brand) cadono sulla scala di default; se hai personalizzato il theme, attendi fallback arbitrari. Le utility semplici fanno round-trip pulito con CSS-to-Tailwind.

Domande frequenti

Cosa viene convertito?: Le utility Tailwind comuni per spacing, colore, tipografia, flex e position, oltre a qualsiasi forma arbitraria [value] o [prop:value]. Le varianti non sono ancora supportate.
Perché chiede un selettore?: L’output è una singola regola CSS. Scegliendo il selettore puoi incollarla nel foglio di stile senza rinominare o reimpacchettare.
Le varianti responsive e hover sono supportate?: Non ancora — richiedono wrapper di media query o pseudoclasse. Togli i prefissi md:, hover: e dark: prima di incollare; le utility base fanno round-trip pulito.
Conosce il mio tema Tailwind?: No. Usa la scala di default. Spacing o colori personalizzati finiscono in arbitrary, ma il CSS rimane funzionante.
Posso ripassare il CSS dal convertitore inverso?: Sì — sulle utility semplici il round-trip è esatto. I valori arbitrari sopravvivono; le dichiarazioni non supportate restano come classi arbitrarie.
I miei dati vengono caricati da qualche parte?: No. Tutta la conversione vive in questa scheda; Toova non vede le tue liste di classi, i selettori o l’output.