Softonic

CSS'ten Tailwind'e

Adım 1 / 2
Tailwind'e dönüştür

Eski bir stil sayfasını tek tek kural aktararak Tailwind’e taşımak yorucudur. Bu dönüştürücü, seçici ve süslü parantez içeren ya da içermeyen düz bir CSS bloğu alır ve her bildirimi bir Tailwind yardımcı sınıfı olarak yeniden yazar. Tanınan çiftler flex, items-center veya rounded-lg gibi adlandırılmış yardımcı sınıflara eşlenir; diğer her şey ise Tailwind’in keyfi değer sözdizimine [property:value] geri düşer, böylece hiçbir şey sessizce atlanmaz.

Dönüştürücü CSS'inizi nasıl işler

  1. 1

    CSS'i yapıştırın

    `.card { padding: 16px; border-radius: 8px; }` gibi tam bir kural ya da yalnızca parantez içindeki bildirimleri girin.

  2. 2

    Ayrıştırıcı yorumları kaldırır

    Blok yorumları `/* ... */`, bildirimler noktalı virgülle ayrılmadan önce kaldırılır.

  3. 3

    Her bildirim eşlenir

    Yaygın özellikler gerçek Tailwind yardımcı sınıflarına eşlenir (boşluk, yarıçap, yazı tipi boyutu, flex, görüntüleme, metin hizalama); bilinmeyen özellikler `[prop:value]` biçimine geri düşer.

  4. 4

    Kopyalayın ve uygulayın

    Sınıf listesini ilgili HTML öğesinin `class` özniteliğine yapıştırın.

Adlandırılmış yardımcı sınıflara neler eşlenir

Tailwind’in varsayılan teması olası her CSS değerini kapsayamaz; bu nedenle dönüştürücü, adlandırılmış bir yardımcı sınıfın bulunduğu değerlere öncelik verir ve diğer her yerde keyfi değerler kullanır.

Doğrudan eşlemeler

CSS bildirimi Tailwind yardımcı sınıfı
display: flex flex
display: grid grid
display: none hidden
justify-content: center justify-center
align-items: center items-center
text-align: center text-center
font-weight: bold font-bold
cursor: pointer cursor-pointer
overflow: hidden overflow-hidden

Ölçeğe duyarlı eşlemeler

padding, margin, genişlik, yükseklik ve minimum/maksimum boyutların tümü, bir Tailwind boşluk adımı üretmek için piksel değerini 4’e böler, padding: 16px, p-4 olur; width: 32px, w-8 olur. Temiz bir adıma denk gelmeyen değerler, ilgili yardımcı sınıfta keyfi değerlere geri düşer; örneğin width: 37px, w-[37px] olur.

border-radius, en yakın adlandırılmış yardımcı sınıfa (rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl) eşlenir. 16px’in üzerindeki boyutlar rounded-full olur; bu, hap biçimli öğeler için kullanışlıdır ancak alışılmadık derecede büyük yarıçaplar için yanlıştır, yayına almadan önce çıktıyı inceleyin.

font-size, piksel eşiklerine göre text-xs’ten text-3xl’e kadar gruplandırılır.

Dikkat edilmesi gerekenler

  • Sözde sınıflar, medya sorguları ve seçiciler çevrilmez; yalnızca parantez içindeki bildirimler çevrilir. hover: veya md: gibi varyantları yine de kendiniz eklemeniz gerekir.
  • Renkler, dönüştürücü Tailwind tema paletinizi bilmediği için text-[#1f2937] gibi keyfi değerlere düşer. Bunları elle text-gray-800 ya da özel bir token ile değiştirin.
  • Nadiren kullandığınız kısaltma özellikleri (border, background, transition) olduğu gibi [property:value] biçiminde döndürülür, yayına almadan önce bunları doğrulayın.

Sık Sorulan Sorular

Çıktı, Tailwind v3 ve v4 sürümlerinde kararlı olan yardımcı sınıf adlarını kullanır. Köşeli parantez içindeki keyfi değerler de her iki sürümde geçerlidir. Yapıştırdıktan sonra renkleri v4’teki @theme paletinize yeniden tokenleştirmek isteyebilirsiniz.

Dönüştürücünün tailwind.config.js renk ölçeğinize erişimi yoktur. Keyfi değeri elle en yakın palet token’ına eşleyin; örneğin text-gray-800 veya tanımladığınız bir marka token’ı.

Evet, birden fazla kural yapıştırın. Araç, her seçici için bir sınıf listesi üretir ve bunları /* selector */ yorumuyla ayırır; böylece ilgili HTML ile hizalayabilirsiniz.

CSS, dönüştürücünün onu Tailwind sınıflarına çevirebilmesi için sunucumuza gönderilir. Kaydedilmez ve sayfa bağlantısına eklenmez.

İlgili Araçlar

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

Telefon numarası doğrulayıcı

Telefon numarasının ülkeye göre yapısını denetleyin; bölge, tür, E.164, uluslararası, ulusal ve RFC 3966 biçimlerini görün.

Kurgusal telefon numarası oluşturucu

Beş ülkede resmen ayrılmış aralıklardan 50 adede kadar kurgusal numara üretin.

Webpack Yapılandırma Oluşturucu

Kısa bir formdan webpack 5 için bir webpack.config.js oluşturun: entry, çıkış klasörü ve modu ayarlayın; ardından TypeScript, Babel, bir CSS yükleyici, HtmlWebpackPlugin ve bir dev sunucu açın.

Rastgele adres oluşturucu

Arayüz maketleri ve testler için üç basitleştirilmiş biçimde 1–20 adres benzeri kayıt oluşturun.

Araç diğer dillerde mevcuttur