Incolla CSS e ottieni classi Tailwind v4 per ogni selettore, oppure incolla classi e ottieni di nuovo il CSS. Hover, focus e breakpoint diventano varianti, e tutto ciò che non si converte viene elencato.
Incolla normali regole CSS e questo convertitore restituisce un elenco di classi Tailwind v4 per ogni selettore, usando classi con nome dove il tema predefinito ha una corrispondenza esatta e valori arbitrari come w-[37px] dove non ce l'ha. Inverti la direzione per trasformare un elenco di classi di nuovo in CSS. I selettori e le regole che non possono diventare classi vengono elencati, mai scartati in silenzio.
Come si convertono le dichiarazioni comuni (tema predefinito di Tailwind v4)
Spostare a mano un foglio di stile in Tailwind significa cercare decine di nomi di classi e fare a mente i calcoli da pixel a rem. Questo convertitore fa la ricerca e i calcoli, mostra quali classi sono valori arbitrari che potresti voler arrotondare alla scala e ti dice chiaramente quali regole devono restare in un file CSS.
Tailwind v4 con il tema predefinito. La spaziatura è calcolata dal valore --spacing di 0.25rem, i nomi dei raggi seguono la scala v4 (rounded-xs è 2px, rounded-sm 4px, rounded-md 6px e così via) e i breakpoint usano i valori in rem della v4.
Una classe con nome viene usata solo quando dà esattamente lo stesso valore. I colori diventano sempre valori arbitrari perché un codice esadecimale raramente corrisponde esattamente a una tonalità della palette, e le dimensioni dei font restano arbitrarie perché le dimensioni di testo con nome impostano anche un'altezza di riga.
Selettori con discendenti, fratelli o attributi, media query che non sono un singolo min-width, keyframe e altre at-rule, e custom property. Compaiono nell'elenco dei non convertiti così puoi spostarli nel tuo file CSS.
Le classi presenti nella tabella del convertitore, i valori arbitrari e le proprietà arbitrarie tornano esatti, con la spaziatura mostrata in valori rem che presuppongono il --spacing predefinito. I nomi dei colori del tema come bg-blue-500 e le ombre predefinite non sono nella tabella e vengono elencati come saltati invece di essere indovinati.
No, ma la sintassi delle proprietà arbitrarie [property:value] copre tutto ciò per cui Tailwind non ha una utility, come [mask-type:luminance]. Questo convertitore la usa per qualsiasi proprietà che non riconosce.
Una regola per una card con uno stato hover e un breakpoint per tablet.
Ogni dichiarazione diventa una classe; le regole di hover e di breakpoint diventano classi con prefisso sullo stesso elemento.
Incolla regole CSS o un elenco di classi Tailwind. I valori arbitrari sono evidenziati e tutto ciò che non può essere convertito è elencato sotto il risultato.
Direzione della conversione
Da CSS a Tailwind
Da Tailwind a CSS
Il tuo CSS
Le tue classi Tailwind
Selettore per il CSS in uscita
Risultato
Copia tutto
Copia le classi
Le classi evidenziate sono valori arbitrari: {n} su {t}.
Non convertiti ({n})
Tutto convertito.
Ancora niente da convertire.
il selettore richiede una classe su un altro elemento o una variante personalizzata
la media query non ha un singolo breakpoint
at-rule mantenuta nel CSS
custom property, mantienila nel CSS o in @theme
non presente nella tabella di questo convertitore
Inizia gratis · Nessuna carta di credito richiesta