HTML/CSS'den Tailwind'ye Dönüştürücü

HTML ve CSS'yi 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'yi 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'yi temiz Tailwind CSS'ye dönüştürün

HTML ve CSS'yi 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'de 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’e aktarım
Oluşturulan Tailwind CSS, hızlı düzenlemeler, deneyler ve paylaşım için doğrudan Tailwind Play'de açılabilir.

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

HTML ve CSS'yi Tailwind'ye dönüştürün

HTML/CSS'den Tailwind'ye 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’iyle birlikte render eder, hesaplanan sonucu okur ve aynı yapıyı her deklarasyonu elle çevirmeden Tailwind projelerine taşıyabilmeniz için Tailwind’e uygun HTML dışa aktarır.

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

Tailfind, HTML ve CSS'yi Tailwind CSS'ye dönüştürebilir mi?
Evet. Bir HTML parçasını ve onun CSS'sini yapıştırın; Tailfind, Tailwind yardımcı program sınıflarıyla normal HTML'yi 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'nin 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'ye dönüştürün

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.

Uygulama ekran görüntüsü