Hangi CSS özellikleri tanınır?

padding ve margin spacing’i, metin ve arka plan renkleri, display, flex hizalama, font boyutu ve ağırlığı, border-radius, width ve height, position ve gap. Geri kalanı [prop:value] arbitrary sınıfı olarak çıkar.

Değer standart ölçekte değilse ne olur?

Dönüştürücü p-[13px] veya bg-[#3b82f6] gibi arbitrary notasyon üretir. JIT bunları derler ve sınıf elle düzeltme olmadan geçerli Tailwind kalır.

Özel CSS değişkenlerini anlar mı?

Evet. var(--token) içeren değerler köşeli parantezler içinde geçer; değişkenin tailwind.config tema veya :root içinde tanımlı kalması gerekir.

Dönüşüm kayıpsız mı?

Yaygın desenlerde evet. Animasyonlar, gradyanlar ve egzotik seçiciler arbitrary sınıflar olarak kalır — hayatta kalır ama orijinal CSS’yi yanlarında tutmak isteyebilirsiniz.

Tailwind-to-CSS aracıyla round-trip mümkün mü?

Çoğunlukla evet. Basit utility’ler aynı geri döner, arbitrary değerler korunur; ancak desteklenmeyen bildirimler dönüşte de arbitrary biçimde kalır.

Bir şey yükleniyor mu?

Hayır. Tüm dönüşüm bu tarayıcı sekmesinde çalışır; stil sayfanızın içeriği sayfayı terk etmez.

CSS’den Tailwind’e — bildirimleri utility’ye

CSS → Tailwind utility’leri

Tasarımdan gizli — tamamen tarayıcınızda çalışır

CSS bildirimlerini sola yapıştırın, sağda Tailwind utility sınıflarını kopyalayın. Dönüştürücü, spacing, renk, tipografi ve düzen için standart ölçekleri yerel utility’lere eşler ve Tailwind’in yerleşik karşılığı bulunmayan değerler için köşeli parantezli notasyona düşer.

Eşlenebilen özellikler

Dönüştürücü günlük CSS yüzeyini tanır: padding ve margin spacing’i, font boyutu ve ağırlığı, renk (text ve bg), display, flex yön ve hizalama, border-radius, width ve height, position, gap. Her biri p-4, text-lg, justify-between gibi kanonik Tailwind kısayoluna düşer ve çıktı elle yazılmış Tailwind gibi okunur.

Arbitrary notasyonu neden değerli

Gerçek kod tabanlarında karşılığı olmayan değerler boldur: 13px özel font boyutu, kendine has hex’li marka rengi, 1.7rem gap. Dönüştürücü bunlarla karşılaştığında text-[13px] ya da bg-[#3b82f6] gibi Tailwind arbitrary biçimini üretir. Sınıf hâlâ geçerli Tailwind kalır, JIT işler ve Tailwind-to-CSS yönünde round-trip temiz çalışır.

Olduğu gibi geçtiği yerler

Karmaşık seçiciler, animasyonlar, gradyanlar ve keyframes bilinçli olarak dönüştürülmez — bu katmanları Tailwind plugin veya @apply ile ele alır ve sezgisel bir eşleme doğruluk konusunda yalan söyler. Bu bildirimler [prop:value] arbitrary sınıflarının içinde harfiyen kalır, böylece verisini kaybetmeden inceleyebilirsiniz.

Sıkça Sorulan Sorular

Hangi CSS özellikleri tanınır?: padding ve margin spacing’i, metin ve arka plan renkleri, display, flex hizalama, font boyutu ve ağırlığı, border-radius, width ve height, position ve gap. Geri kalanı [prop:value] arbitrary sınıfı olarak çıkar.
Değer standart ölçekte değilse ne olur?: Dönüştürücü p-[13px] veya bg-[#3b82f6] gibi arbitrary notasyon üretir. JIT bunları derler ve sınıf elle düzeltme olmadan geçerli Tailwind kalır.
Özel CSS değişkenlerini anlar mı?: Evet. var(--token) içeren değerler köşeli parantezler içinde geçer; değişkenin tailwind.config tema veya :root içinde tanımlı kalması gerekir.
Dönüşüm kayıpsız mı?: Yaygın desenlerde evet. Animasyonlar, gradyanlar ve egzotik seçiciler arbitrary sınıflar olarak kalır — hayatta kalır ama orijinal CSS’yi yanlarında tutmak isteyebilirsiniz.
Tailwind-to-CSS aracıyla round-trip mümkün mü?: Çoğunlukla evet. Basit utility’ler aynı geri döner, arbitrary değerler korunur; ancak desteklenmeyen bildirimler dönüşte de arbitrary biçimde kalır.
Bir şey yükleniyor mu?: Hayır. Tüm dönüşüm bu tarayıcı sekmesinde çalışır; stil sayfanızın içeriği sayfayı terk etmez.