Lipiți HTML și CSS, previzualizați fragmentul randat și exportați Tailwind CSS curat pentru Tailwind Play sau baza de cod.

Fără previzualizare sursă

Previzualizarea sursei apare când intrarea este validă.

Tailwind v4

Nicio ieșire încă

Ieșirea generată Tailwind apare aici automat.

Fără previzualizare Tailwind

Previzualizarea Tailwind generată apare aici după conversie.

Convertor Tailwind perfect pentru pixeli

Convertiți HTML și CSS în Tailwind CSS curat

Citește HTML și CSS împreună
Selectoarele, clasele, stilurile inline și regulile imbricate sunt rezolvate în raport cu marcajul real înainte ca utilitarele Tailwind să fie generate.
Păstrează un marcaj semnificativ
Structura semantică, atributele, textul, linkurile și elementele de formular rămân în HTML exportat, în timp ce stilul trece la utilitare.
Conversie susținută de previzualizare
Previzualizările sursă și generate facilitează compararea fragmentului original cu rezultatul Tailwind.
Acoperire cu elemente imbricate
Elementele copil, SVG, pictogramele și fragmentele UI compuse sunt convertite cu contextul stilului din jur.
Util pentru reconstrucția componentelor
Migrați fragmente copiate de interfață de utilizare, prototipuri și fragmente statice în componentele Tailwind fără a pierde forma originală HTML.
Transfer către Tailwind Play
Tailwind CSS generat se poate deschide direct în Tailwind Play pentru editări rapide, experimente și partajare.

Ghid pentru convertizorul HTML/CSS

Convertiți HTML și CSS în Tailwind

Convertorul HTML/CSS în Tailwind este creat pentru fragmente de interfață de utilizare lipite, secțiuni de pagină de destinație, prototipuri și șabloane vechi, în care stilurile sunt împărțite între selectoare, clase și declarații inline.

Tailfind redă marcajul cu CSS, citește rezultatul calculat și exportă HTML gata de Tailwind, astfel încât să puteți muta aceeași structură în proiecte Tailwind fără a traduce manual fiecare declarație.

Folosiți-l când aveți nevoie de o conversie rapidă din HTML în Tailwind CSS, de o predare mai curată către Tailwind Play sau de un punct de pornire pentru reconstruirea componentelor statice în Angular, React, Vue, Svelte sau HTML simplu.

Tailfind poate converti HTML și CSS în Tailwind CSS?
Da. Lipiți un fragment HTML și CSS al acestuia, iar Tailfind redă rezultatul înainte de a exporta HTML obișnuit cu clase de utilitate Tailwind.
Convertorul păstrează valorile personalizate CSS?
Tailfind preferă utilitarele implicite Tailwind când valorile se potrivesc cu scara cadrului și utilizează utilități arbitrare explicite pentru culori, spațiere, umbre și dimensiuni personalizate.
Ce fel de HTML funcționează cel mai bine?
Fragmentele de interfață de utilizare mici, autonome, funcționează cel mai bine, inclusiv carduri, formulare, secțiuni, prototipuri și fragmente vechi în care CSS pot fi lipite cu marcajul.

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