Lipiți un bloc de declarație CSS și convertiți proba redată în clase Tailwind pe care le puteți copia în componente.

CSS
Tailwind v4

Nicio ieșire încă

Ieșirea generată Tailwind apare aici automat.

Convertor Tailwind perfect pentru pixeli

Convertiți CSS în clase curate Tailwind

Declarație-prima conversie
Lipiți un bloc de declarație CSS și Tailfind îl aplică unui element eșantion înainte de a converti rezultatul redat în clase Tailwind reutilizabile.
Preferință de utilitate implicită
Valorile implicite Tailwind portabile sunt păstrate atunci când valorile declarației se potrivesc cu scara cadrului.
Valoarea de rezervă arbitrară
Valorile non-implicite devin utilități arbitrare explicite, astfel încât pixelii, culorile, umbrele și sincronizarea personalizate sunt ușor de inspectat.
Ieșire sigură pentru aspect
Spațierea, dimensionarea, afișarea, grila, flexibilitatea, chenarele, umbrele și tipografia sunt mapate din eșantionul randat.
Extracție rapidă de clasă
Ieșirea este o listă concentrată de clase Tailwind care este gata de copiere într-o componentă, un vârf de simbol sau o trecere de curățare.
Bun pentru audituri
Folosiți-l pentru a înlocui blocurile unice CSS, experimentele de stil inline și prototipurile de sistem de proiectare cu utilitare Tailwind mai clare.

Ghid pentru convertizorul CSS

Transformați declarațiile CSS în utilitare Tailwind

Convertorul CSS la Tailwind transformă un bloc de declarații în cele mai apropiate clase de utilitate portabile Tailwind. Este util pentru jetoane de design unice, curățarea stilului inline și mutarea fragmentelor mici CSS în marcarea componentelor.

Tailfind aplică declarațiile unui element eșantion înainte de conversie, astfel încât valorile de aspect, spațiere, culoare, chenar, umbră, tipografie și dimensionare sunt interpretate prin aceeași cale de randare a browserului folosită de extensie.

Folosiți-l pentru a converti proprietățile CSS în clase Tailwind, pentru a verifica ce valori se mapează la scara implicită Tailwind și pentru a păstra valorile non-implicite explicite ca utilități arbitrare.

Poate converti CSS în Tailwind?
Da. Lipiți un bloc de declarație CSS și Tailfind îl aplică unui element eșantion înainte de a exporta cea mai apropiată listă de clasă Tailwind.
Sunt păstrate valorile personalizate?
Tailfind mapează valorile la utilitarele implicite Tailwind atunci când este posibil și păstrează vizibile valorile non-implicite ca utilități arbitrare în loc să le ascundă.
Ar trebui să lipesc o foaie de stil completă?
Convertorul CSS este proiectat pentru blocuri de declarare. Utilizați convertorul HTML/CSS atunci când sunt necesare selectoare, clase, marcaje imbricate sau o foaie de stil mai completă.

Omite conversia manuală

Convertiți orice pagină live în Tailwind CSS curat

Tailfind aduce convertorul în browser, astfel încât să puteți captura interfața de producție direct din pagina pe care o vizualizați.

Captură de ecran a aplicației