HTML/CSS ile Tailwind Dönüştürücü

HTML ve CSS içeriklerini yapıştırın, oluşturulan parçanın ön izlemesini yapın ve Tailwind Play veya kod tabanınız için temiz Tailwind CSS dışa aktarın.

Kaynak önizlemesi yok

Girdi geçerli olduğunda kaynak önizlemesi görünür.

Tailwind v4

Henüz çıktı yok

Oluşturulan Tailwind çıktısı burada otomatik olarak görünür.

Tailwind önizleme yok

Oluşturulan Tailwind önizlemesi dönüştürmeden sonra burada görünür.

Piksel hassasiyetinde Tailwind dönüştürücü

HTML ve CSS içeriklerini temiz Tailwind CSS biçimine dönüştürün

HTML ve CSS içeriklerini birlikte okur
Seçiciler, sınıflar, satır içi stiller ve iç içe geçmiş kurallar, Tailwind yardımcı programları oluşturulmadan önce gerçek işaretlemeye göre çözümlenir.
Anlamlı işaretlemeyi korur
Anlamsal yapı, nitelikler, metin, bağlantılar ve form öğeleri, stillendirme yardımcı programlara taşınırken dışa aktarılan HTML içinde kalır.
Önizleme destekli dönüşüm
Kaynak ve oluşturulan önizlemeler, orijinal parçayı Tailwind çıktısıyla karşılaştırmayı kolaylaştırır.
İç içe öğe kapsamı
Alt öğeler, SVG'ler, simgeler ve oluşturulan kullanıcı arayüzü parçaları, çevreleyen stil bağlamıyla dönüştürülür.
Bileşen yeniden oluşturma işlemleri için kullanışlıdır
Kopyalanan kullanıcı arayüzü parçalarını, prototipleri ve statik parçacıkları, orijinal HTML şeklini kaybetmeden Tailwind bileşenlerine taşıyın.
Tailwind Play aktarımı
Oluşturulan Tailwind CSS, hızlı düzenlemeler, deneyler ve paylaşım için doğrudan Tailwind Play içinde açılabilir.

HTML/CSS dönüştürücü kılavuzu

HTML ve CSS içeriklerini Tailwind biçimine dönüştürün

HTML/CSS ile Tailwind dönüştürücü, yapıştırılan kullanıcı arayüzü parçaları, açılış sayfası bölümleri, prototipler ve stillerin seçiciler, sınıflar ve satır içi bildirimler arasında bölündüğü eski şablonlar için oluşturulmuştur.

Tailfind markup’ı CSS ile birlikte render eder, hesaplanan sonucu okur ve aynı yapıyı her deklarasyonu elle çevirmeden Tailwind projelerine taşıyabilmeniz için Tailwind CSS dışa aktarır.

HTML içeriğini hızlıca Tailwind CSS biçimine dönüştürmeniz, Tailwind Play için daha temiz bir aktarım yapmanız veya Angular, React, Vue, Svelte ya da düz HTML içinde statik bileşenleri yeniden oluşturmak için başlangıç noktası almanız gerektiğinde kullanın.

Tailfind, HTML ve CSS içeriklerini Tailwind CSS biçimine dönüştürebilir mi?
Evet. Bir HTML parçasını ve onun CSS içeriğini yapıştırın; Tailfind, Tailwind yardımcı program sınıflarıyla normal HTML çıktısını dışa aktarmadan önce sonucu oluşturur.
Dönüştürücü özel CSS değerlerini koruyor mu?
Tailfind, değerler çerçeve ölçeğiyle eşleştiğinde varsayılan Tailwind yardımcı programlarını tercih eder ve özel renkler, aralıklar, gölgeler ve boyutlar için açık rastgele yardımcı programlar kullanır.
Ne tür HTML en iyi sonucu verir?
İlgili CSS içeriğinin işaretlemeyle yapıştırılabileceği kartlar, formlar, bölümler, prototipler ve eski parçacıklar dahil olmak üzere küçük, bağımsız kullanıcı arayüzü parçaları en iyi sonucu verir.

Manuel dönüştürmeyi atlayın

Herhangi bir canlı sayfayı
temiz Tailwind CSS biçimine

Tailfind, dönüştürücüyü tarayıcınıza getirir, böylece üretim kullanıcı arayüzünü doğrudan görüntülediğiniz sayfadan yakalayabilirsiniz.

Daha fazla bilgi İndir
Uygulama ekran görüntüsü