Tailwind CSS class isimlerini saf CSS koduna dönüştürün. Class'ları yapıştırın, karşılık gelen CSS çıktısını anında alın.
Bu araç, Tailwind CSS utility class'larını standart CSS koduna dönüştürür. Tailwind projelerinden vanilla CSS'e geçiş yaparken, class'ların ne ürettiğini anlamak istediğinizde veya Tailwind kullanmayan bir projeye stil taşırken son derece faydalıdır.
Desteklenen özellikler: Layout, flexbox, grid, spacing (padding/margin), sizing (width/height), typography, tüm Tailwind renkleri (22 renk × 11 ton), border, radius, shadow, opacity, transform, transition, position, overflow, cursor ve daha fazlası. Responsive prefix'ler (sm:, md:, lg:, xl:, 2xl:) @media sorgularına, state prefix'ler (hover:, focus:, active: vb.) pseudo-class'lara dönüştürülür.
Tüm Tailwind class'ları destekleniyor mu?
En yaygın 200'den fazla utility class ve tüm renk paleti (22 renk × 11 ton = 242 renk kombinasyonu) desteklenmektedir. Özel eklentiler veya çok nadir kullanılan class'lar tanınmayabilir.
Responsive ve hover gibi prefix'ler çalışıyor mu?
Evet. sm:, md:, lg:, xl:, 2xl: prefix'leri @media (min-width: ...) sorgularına sarılır. hover:, focus:, active: gibi state prefix'leri ise ilgili pseudo-class'lara dönüştürülür.
Arbitrary value desteği var mı?
Evet. p-[20px], w-[300px], text-[#ff0000] gibi köşeli parantez içindeki özel değerler desteklenir.
Canlı önizleme nedir?
Üretilen CSS kodu gerçek bir HTML elemanına uygulanır, böylece sonucu anında görebilirsiniz.