Bootstrap'den Tailwind'ye Dönüştürücü

Bootstrap 4 veya 5 işaretlemesini yapıştırın, önizlemeyi karşılaştırın ve taşıma ve yeniden oluşturma çalışmaları için Tailwind CSS'yi dışa aktarın.

Bootstrap

Kaynak önizlemesi yok

Bootstrap HTML 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ü

Bootstrap bileşenlerini temiz Tailwind CSS’ye dönüştürün

Sürüme duyarlı dönüşüm
Bootstrap 4 veya 5'i seçin, böylece Tailfind, Tailwind çıktısını oluşturmadan önce doğru kaynak çerçevesi varsayımlarını uygular.
Bileşen sınıfı çevirisi
Kartlar, rozetler, uyarılar, düğmeler, formlar, spacing utility’leri ve text utility’leri Tailwind’e uygun düz markup’a dönüştürülür.
Önizleme destekli temizleme
Kaynak ve oluşturulan önizlemeler, kopyalamadan önce Bootstrap girişini Tailwind çıkışıyla karşılaştırmanıza yardımcı olur.
Izgara ve aralık geçişi
Bootstrap düzen parçaları ve yardımcı program aralığı, ayarlanması daha kolay, okunabilir Tailwind sınıfları haline gelir.
Çıktı SPA'ye hazır
Sonuç, Tailwind yardımcı programlarına sahip, Angular şablonlarına, React bileşenlerine ve diğer ön uç yığınlarına taşınmaya hazır, düzenli HTML'dir.
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.

Bootstrap geçiş kılavuzu

Bootstrap bileşenlerini Tailwind projelerine taşıma

Bootstrap’ten Tailwind’e dönüştürücü, her component class’ını elle yeniden yazmadan Bootstrap 4 ve Bootstrap 5 markup’ını Tailwind projelerine taşımaya yardımcı olur.

Tailfind, seçilen Bootstrap sürümünü yükler, kaynak bileşenin ön izlemesini yapar ve kartlar, düğmeler, rozetler, formlar, ızgaralar, boşluklar ve tipografi için Tailwind yardımcı programlarıyla normal HTML'yi dışa aktarır.

Kendi tasarım sisteminizde iyileştirilebilecek okunabilir bir başlangıç noktası istediğinizde Bootstrap geçiş çalışması, Tailwind yeniden oluşturmaları veya hızlı bileşen çevirisi için bunu kullanın.

Tailfind, Bootstrap 4 ve Bootstrap 5'i Tailwind'ye dönüştürebilir mi?
Evet. Bootstrap 4 veya Bootstrap 5'i seçin, işaretlemeyi yapıştırın ve Tailfind, Tailwind CSS'yi dışa aktarmadan önce eşleşen Bootstrap CSS'yi yükler.
Bootstrap kaynağını Tailwind sonucuyla karşılaştırabilir miyim?
Evet. Dönüştürücü bir kaynak önizlemesini ve oluşturulmuş bir Tailwind önizlemesini gösterir, böylece geçiş işi çıktıyı kopyalamadan önce kontrol edilebilir.
Bootstrap çıkışı üretime hazır mı?
Çıktı, geçiş ve yeniden oluşturma çalışmaları için okunabilir bir Tailwind başlangıç noktasıdır. Üretim kullanıcı arayüzünü göndermeden önce kendi tasarım sisteminizde inceleyin.

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ü