CSS'ten Tailwind'e Dönüştürücü: CSS Kurallarını Çevirin
Bu CSS'ten Tailwind'e Dönüştürücü, bir CSS kural bloğunu okur ve bildirimleri Tailwind yardımcı sınıflarıyla eşleştirir. Adlandırılmış bir yardımcı sınıf yoksa w-[137px] gibi keyfi değer (arbitrary-value) sözdizimini kullanır; eşleştiremediği bildirimleri sessizce düşürmek yerine listeler. Projenize uygun Tailwind v3 veya v4'ü seçin, ardından dönüştürülmüş sonucu inceleyip kopyalayın.
CSS'ten Tailwind'e Dönüştürücü, bir CSS kural bloğunu okur ve bildirimlerini Tailwind yardımcı sınıflarıyla eşleştirir. Her bildirimi elle aramadan yardımcı sınıf karşılıklarını incelemek istediğinizde CSS'i çevrimiçi Tailwind'e dönüştürmek için kullanın. Sonuç, adlandırılmış bir yardımcı sınıfla eşleşen bildirimleri w-[137px] gibi keyfi değer sözdizimi gerektiren değerlerden ayırır.
Projenizin kullandığı sürüme uymak için Tailwind v3 veya v4'ü seçin. Dönüştürücü, adlandırılmış yardımcı sınıfı olmayan bildirimler için keyfi değer sözdizimini kullanır ve eşleştiremediklerini sessizce kaybetmemek için listeler. Eşleştirme tablosu, dönüştürme mantığına dağılmış olmak yerine tek bir veri modülünde bulunur.
CSS kuralları stilleri bildirimlerle ifade ederken Tailwind stilleri yardımcı sınıflarla uygular. Bir kural bloğunu dönüştürmek; mevcut stilleri Tailwind'e taşırken veya bir bildirimin yardımcı sınıflarla nasıl temsil edilebileceğini denetlerken yardımcı olabilir. Sürüm seçici ve eşleşmeyenler listesi, çıktıyı projenizin ihtiyaçlarına göre incelemeyi kolaylaştırır.
Dönüştürücü tamamen tarayıcınızda çalışır: girdi cihazınızda işlenir; yüklenmez, saklanmaz veya bir sunucuya gönderilmez. Sayfa yüklendikten sonra çevrimdışı çalışır; böylece bağlantı olmadan dönüştürmeye devam edebilirsiniz. Araç ücretsizdir ve kullanmak için yerel bir şey yüklemenize gerek yoktur.
Geliştiriciler ve DevOps mühendisleri, Tailwind'e yeni başlıyor ya da mevcut bir projeyi sürdürüyor olsunlar, hızlı CSS'ten Tailwind'e kontrolleri için dönüştürücüyü kullanabilir. Bir CSS kural bloğunu yapıştırın veya yazın, bir Tailwind sürümü seçin, eşleşen ve eşleşmeyen bildirimleri inceleyin ve sonucu kopyalayın.
Adım 1: Bir CSS kural bloğunu yapıştırın veya yazın. Dönüştürücü bildirimlerini okur ve bunları Tailwind yardımcı sınıflarıyla eşleştirir.
Adım 2: Tailwind v3 veya v4'ü seçin. Üzerinde çalıştığınız Tailwind projesine uyan sürümü belirleyin.
Adım 3: CSS'i dönüştürün. Sonuç, mümkün olan yerlerde adlandırılmış yardımcı sınıfları, adlandırılmış yardımcı sınıfı olmayan değerler içinse keyfi değer sözdizimini kullanır.
Adım 4: Eşleşmeyen bildirimleri inceleyin. Dönüştürülmeyen bildirimlerin hangileri olduğunu görmek için listeyi kontrol edin.
Adım 5: Sonucu kopyalayın. Oluşturulan yardımcı sınıfları projenizde kullanmadan önce inceleyin.
Kullanım senaryosu: Geçiş çalışması sırasında bir CSS kural bloğunu Tailwind yardımcı sınıflarına dönüştürün. Eşleşmeyenler listesi, ek dikkat gerektiren bildirimleri belirlemenize yardımcı olur.
Kullanım senaryosu: Belirli bir CSS bildiriminin bir Tailwind yardımcı sınıfıyla nasıl eşleştiğini denetleyin. Keyfi değer sözdizimi, adlandırılmış yardımcı sınıfı olmayan değerleri temsil edebilir.
Kullanım senaryosu: Tailwind v3 ve v4 için dönüştürme sonuçlarını karşılaştırın. Güncellediğiniz projeye uyan sürümü seçin.
Kullanım senaryosu: Yerel bir şey yüklemeden rutin bir CSS'ten Tailwind'e dönüşümü halledin. Kural bloğunu tarayıcı tabanlı araca yapıştırın ve sonucu kopyalayın.
Kullanım senaryosu: Hangi makinede çalışıyor olursanız olun dönüşüm üzerinde çalışın. Araç tarayıcınızda çalışır ve sayfa yüklendikten sonra çevrimdışı çalışmaya devam edebilir.
Kullanım senaryosu: Kurumsal CSS'i üçüncü taraf bir hizmete göndermeden dönüştürün. Girdi tarayıcınızda işlenir ve bir sunucuya gönderilmez.