Poate converti CSS în Tailwind?

Da. Lipiți un bloc de declarații CSS și Tailfind îl aplică unui element de exemplu înainte de a exporta cea mai apropiată listă de clase Tailwind.

Sunt păstrate valorile personalizate?

Tailfind mapează valorile la utilitarele implicite Tailwind atunci când este posibil și păstrează vizibile valorile care nu sunt implicite ca utilitare 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ă.

Convertor CSS în Tailwind

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

Conversie pornind de la declarații: Lipiți un bloc de declarații CSS și Tailfind îl aplică unui element de exemplu înainte de a converti rezultatul randat î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 frameworkului.
Fallback pentru valori arbitrare: Valorile care nu sunt implicite devin utilitare arbitrare explicite, astfel încât pixelii, culorile, umbrele și temporizările 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ă: Rezultatul este o listă concentrată de clase Tailwind, gata de copiat într-o componentă, într-un experiment cu tokenuri sau într-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 în Tailwind transformă un bloc de declarații în cele mai apropiate clase de utilitare Tailwind portabile. Este util pentru tokenuri de design punctuale, curățarea stilurilor inline și mutarea fragmentelor mici CSS în markupul 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 care nu sunt implicite ca utilitare arbitrare explicite.

Poate converti CSS în Tailwind?: Da. Lipiți un bloc de declarații CSS și Tailfind îl aplică unui element de exemplu înainte de a exporta cea mai apropiată listă de clase Tailwind.
Sunt păstrate valorile personalizate?: Tailfind mapează valorile la utilitarele implicite Tailwind atunci când este posibil și păstrează vizibile valorile care nu sunt implicite ca utilitare 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 o pagină live
în Tailwind CSS

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.

Mai multe informații

Descărcați