Incolla un blocco di dichiarazione CSS e converti il campione renderizzato in classi Tailwind che puoi copiare nei componenti.

CSS
Tailwind v4

Ancora nessuna uscita

L'uscita Tailwind generata appare qui automaticamente.

Convertitore Tailwind pixel perfetto

Converti CSS in classi Tailwind pulite

Prima conversione della dichiarazione
Incolla un blocco di dichiarazione CSS e Tailfind lo applica a un elemento campione prima di convertire il risultato renderizzato in classi Tailwind riutilizzabili.
Preferenza di utilità predefinita
Le impostazioni predefinite di Portable Tailwind vengono preservate quando i valori della dichiarazione corrispondono alla scala del quadro.
Fallback con valore arbitrario
I valori non standard diventano classi arbitrarie esplicite, così pixel, colori, ombre e timing personalizzati sono facili da controllare.
Output sicuro per il layout
Spaziatura, ridimensionamento, visualizzazione, griglia, flessibilità, bordi, ombre e tipografia vengono mappati dal campione renderizzato.
Estrazione veloce della classe
L'output è un elenco di classi Tailwind mirato pronto per essere copiato in un componente, un picco di token o un passaggio di pulizia.
Buono per gli audit
Usalo per sostituire blocchi CSS unici, esperimenti di stile inline e prototipi di design system con classi Tailwind più chiare.

Guida al convertitore CSS

Trasforma dichiarazioni CSS in classi Tailwind

Il convertitore da CSS a Tailwind trasforma un blocco di dichiarazioni nelle classi Tailwind portabili più vicine. È utile per design token puntuali, pulizia di stili inline e spostamento di piccoli snippet CSS nel markup dei componenti.

Tailfind applica le dichiarazioni a un elemento campione prima della conversione, quindi i valori di layout, spaziatura, colore, bordo, ombra, tipografia e dimensionamento vengono interpretati tramite lo stesso percorso di rendering del browser utilizzato dall'estensione.

Usalo per convertire proprietà CSS in classi Tailwind, controllare quali valori corrispondono alla scala predefinita di Tailwind e mantenere espliciti i valori non standard come classi arbitrarie.

Può convertire CSS in Tailwind?
SÌ. Incolla un blocco di dichiarazione CSS e Tailfind lo applica a un elemento campione prima di esportare l'elenco di classi Tailwind più vicino.
I valori personalizzati vengono conservati?
Tailfind mappa i valori sulle classi Tailwind predefinite quando possibile e mantiene i valori non standard visibili come classi arbitrarie invece di nasconderli.
Devo incollare un foglio di stile completo?
Il convertitore CSS è progettato per blocchi di dichiarazioni. Utilizza il convertitore HTML/CSS quando sono necessari selettori, classi, markup annidati o un foglio di stile più completo.

Salta la conversione manuale

Converti qualsiasi pagina live in Tailwind CSS pulito

Tailfind porta il convertitore nel tuo browser, così puoi catturare l'interfaccia utente di produzione direttamente dalla pagina che stai visualizzando.

Screenshot dell'app