Tailwind CSS Dönüştürücü
Ham CSS'i Tailwind CSS yardımcı sınıflarına ve tersine dönüştürün. Margin, padding, display, flex, grid, renkler, tipografi, kenarlıklar ve daha fazlasını destekler.
CSS Girişi
Tailwind Çıktısı
Tailwind sınıfları oluşturmak için sola CSS yapıştırın
Tailwind CSS Dönüştürücü
Ham CSS'i Tailwind CSS yardımcı sınıflarına ve tersine dönüştürün. Margin, padding, display, flex, grid, renkler, tipografi, kenarlıklar ve daha fazlasını destekler.
Özellikler
- CSS özelliklerini anında Tailwind CSS yardımcı sınıflarına dönüştürün
- Ters mod: Tailwind sınıflarını tekrar ham CSS'e dönüştürün
- Flex, grid, boşluk, renkler ve tipografi dahil 50'den fazla CSS özelliğini destekler
- Tailwind köşeli parantez notasyonu ile rastgele değerleri işler
- Tailwind'in varsayılan boşluk ölçeğini, renk paletini ve breakpoint'leri tanır
- Manuel dönüştürme gerektiren eşlenmemiş özellikleri vurgular
Nasıl Kullanılır
- CSS kodunuzu sol panele yapıştırın veya örnek CSS için Örnek'e tıklayın.
- Oluşturulan Tailwind sınıflarını sağ panelde anında görüntüleyin.
- Ters moda geçmek ve Tailwind sınıflarını CSS'e geri dönüştürmek için Değiştir'e tıklayın.
SSS
Hangi CSS özellikleri destekleniyor?
Dönüştürücü display, position, flex/grid düzeni, margin, padding, width, height, font-size, font-weight, renkler, border, border-radius, opacity, box-shadow, z-index, overflow, cursor ve daha birçok dahil 50'den fazla yaygın CSS özelliğini destekler. Desteklenmeyen özellikler eşlenmemiş yorumlar olarak listelenir.
Tailwind sınıflarını tekrar CSS'e dönüştürebilir miyim?
Evet. Ters moda geçmek için Değiştir düğmesine tıklayın. Boşluklarla ayrılmış Tailwind yardımcı sınıflarını girin, araç bir .element seçicisine sarılmış eşdeğer CSS bildirimlerini oluşturacaktır.
Renkler nasıl eşleniyor?
Dönüştürücü Tailwind'in varsayılan renk paletini (slate, gray, red, blue, green, yellow, purple) çeşitli tonlarda (50-900) tanır. #3b82f6 gibi hex değerler blue-500'e eşlenir. Tanınmayan renkler Tailwind'in rastgele değer sözdizimini kullanır, ör. bg-[#custom].
Kısaltılmış CSS özelliklerini işliyor mu?
Evet. Margin, padding ve border gibi kısaltılmış özellikler ayrıştırılır ve Tailwind eşdeğerlerine dönüştürülür. Örneğin, margin: 8px 16px, my-2 mx-4 olur ve border: 1px solid #ccc, border border-solid border-[#ccc] olur.
CSS verilerim bir sunucuya gönderiliyor mu?
Hayır. Tüm dönüştürme, istemci tarafı JavaScript kullanılarak tamamen tarayıcınızda gerçekleşir. CSS kodunuz asla cihazınızdan ayrılmaz, bu aracı tamamen özel ve tescilli kodla kullanım için güvenli kılar.
Desteklenmeyen özelliklerle ne olur?
Standart bir Tailwind sınıfına eşlenemeyen özellikler çıktıda yorumlar olarak listelenir. Bu, tam olarak hangi özelliklerin manuel işleme veya özel Tailwind yapılandırması gerektirdiğini görmenizi sağlar.
Tailwind rastgele değerleri destekliyor mu?
Evet. Bir CSS değeri Tailwind'in varsayılan ölçeğiyle eşleşmediğinde, dönüştürücü p-[13px] veya text-[22px] gibi rastgele değer sözdizimini kullanır. Ters modda, w-[200px] gibi rastgele değerler doğru şekilde width: 200px olarak ayrıştırılır.