Tailwind utility’leri → CSS
Tasarımdan gizli — tamamen tarayıcınızda çalışır
Tailwind utility sınıflarının listesini ve bir seçiciyi yapıştırın; Toova karşılığı olan CSS kuralını derler. p-[13px] veya [grid-template-columns:1fr_2fr] gibi arbitrary sınıflar ham bildirimlerine açılır ve stil sayfasına bırakmaya hazır olur.
Ters yönün işe yaradığı yerler
Bazen Tailwind ile prototip yaparsınız ama CSS teslim etmeniz gerekir — bir pazarlama e-postası, üçüncü taraf widget, Tailwind yüklemeyen bir CMS. Dönüştürücü utility listesini seçtiğiniz seçici altında tek bir kurala katlar; isim değiştirmeden ya da playground markup’ını ayıklamadan doğrudan yapıştırırsınız.
Arbitrary değerlerin geri dönüşü
Tailwind arbitrary sınıfları değerlerini doğrudan taşır: p-[13px] padding: 13px, [grid-template-columns:1fr_2fr] grid-template-columns: 1fr 2fr demektir. Dönüştürücü her iki şekli kelimesi kelimesine açar, böylece JIT ile kodladığınız her özel değer ek tabloya gerek kalmadan yolculuğa dayanır.
Sınırlar ve gidiş-dönüş
Responsive (md:flex), durum (hover:bg-black) ve karanlık mod (dark:text-white) varyantları medya sorgusu veya pseudo-class sarmalayıcısı ister; dönüştürücü bunları henüz çıkarmıyor — yapıştırmadan önce kaldırın. Tema token’ları (text-brand) varsayılan ölçeğe düşer; tema özelleştirildiyse arbitrary fallback’lar bekleyin. Düz utility’ler CSS-to-Tailwind aracıyla temiz round-trip yapar.
Sıkça Sorulan Sorular
- Ne dönüştürülür?
- Spacing, renk, tipografi, flex ve position için yaygın Tailwind utility’leri, ayrıca herhangi bir arbitrary [value] veya [prop:value] biçimi. Varyantlar henüz desteklenmiyor.
- Neden seçici sorulur?
- Çıktı tek bir CSS kuralıdır. Seçiciyi önceden seçince stil sayfasına yeniden adlandırmadan veya sarmalamadan doğrudan yapıştırabilirsiniz.
- Responsive ve hover varyantları destekli mi?
- Henüz değil; medya sorgusu veya pseudo-class sarmalayıcısı gerekir. Yapıştırmadan önce md:, hover: ve dark: öneklerini kaldırın; temel utility’ler temiz round-trip yapar.
- Tailwind temamı biliyor mu?
- Hayır. Varsayılan ölçeği kullanıyoruz. Özelleştirilmiş spacing veya renkler arbitrary olarak düşer; CSS yine çalışır.
- CSS’i ters araç üzerinden geri gönderebilir miyim?
- Evet. Düz utility’ler için round-trip birebir aynıdır. Arbitrary değerler hayatta kalır; desteklenmeyen bildirimler arbitrary sınıf olarak kalır.
- Girdim yükleniyor mu?
- Hayır. Tüm dönüşüm bu sekmede çalışır; Toova sınıf listenizi, seçicinizi veya çıktınızı görmez.