İçeriğe geç
Toova
Tüm Araçlar

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.