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

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

EditorConfig Oluşturucu

Girinti stili ve boyutu, satır sonu, karakter kümesi ve boşluk kurallarınızla bir .editorconfig dosyası oluşturarak IDE ve editörler arasında tutarlı biçimlendirme sağlayın.

E-posta Doğrulayıcı

Bir e-posta adresini doğrulayın: RFC 5322 sözdizimi kontrolü, canlı MX kaydı sorgulama, ayrıca yerel kısım, alan adı ve uzunluk bilgileri. Hiçbir e-posta gönderilmez.

Gradyan Duvar Kağıdı Oluşturucu

Dizüstü bilgisayar, telefon veya Zoom arka planları için bulanık üç renkli gradyan duvar kağıtları oluşturun. Açıyı ve bulanıklığı rastgele belirleyin ya da elle ayarlayın.

Araç diğer dillerde mevcuttur