İçeriğe geç
Dönüştürme araçları

CSS'ten Tailwind'e Dönüştürücü — CSS'ten Tailwind Sınıflarına

CSS bildirimlerini, her seçici için @apply kuralları olarak gösterilen Tailwind CSS yardımcı sınıflarına dönüştürün. Mevcut stilleri taşırken karşılık gelen sınıfları bulmak için kullanın. Dönüştürücü Tailwind CSS v3'ü hedefler.

Geçiş sırasında mevcut CSS kurallarına karşılık gelen Tailwind yardımcı sınıflarını bulmak.

CSS

TailwindCSS 3.x

Ne zaman kullanılır?

  • Geçiş sırasında mevcut CSS kurallarına karşılık gelen Tailwind yardımcı sınıflarını bulmak.
  • Bildiğiniz CSS'i dönüştürerek Tailwind sınıf adlarını öğrenmek.

Nasıl kullanılır?

  1. CSS kurallarını yapıştırın.
  2. Projeniz özel ayarlar kullanıyorsa rem temel değerini veya Tailwind yapılandırmasını düzenleyin.
  3. @apply sonrasındaki sınıfları işaretlemenize veya stil sayfanıza kopyalayın, ardından Tailwind projenizde sonucu kontrol edin.

CSS girdisi

.card { display: flex; padding: 1rem; }

Tailwind çıktısı (varsayılan ölçek)

.card {
  @apply flex p-4;
}

Ayrıntılar ve sınırlamalar

Sınıf adları ve ölçekler Tailwind CSS v3'e göredir. Tailwind CSS v4 yapılandırması ve söz dizimiyle uyumluluk garanti edilmez.

Özel değerler, karmaşık seçiciler ve sözde öğeler dönüştürülemeyebilir. Çıktının aynı görünmesi garanti edilmez; gerçek sayfada kontrol edin.

Özel yapılandırma alanı tarayıcınızda JavaScript olarak değerlendirilir. Güvenmediğiniz yapılandırmaları yapıştırmayın.

FAQ

Tailwind CSS v4 destekleniyor mu?

Tailwind CSS v3 sınıf adları ve ölçekleri kullanılır. flex, p-4 ve text-sm gibi birçok sınıf v4'te adını korur; ancak v4 yapılandırmayı CSS'e taşır ve bazı sınıfları yeniden adlandırır. Bu yüzden çıktıyı v4 projenizde kontrol edin.

@apply yerine sınıf adlarını nasıl kullanırım?

@apply sonrasındaki listeyi öğenin class özniteliğine kopyalayın; örneğin class="flex p-4". @apply biçimi sınıfları özgün seçiciye göre gruplar.

Bootstrap sınıflarını Tailwind'e dönüştürebilir mi?

Hayır. Başka bir çatının sınıf adlarını değil, CSS bildirimlerini dönüştürür. Karşılık gelen sınıfları görmek için Bootstrap bileşeninin CSS kurallarını yapıştırın.

Bazı bildirimler neden dönüştürülmüyor?

Tailwind ölçeği dışındaki değerlerin, karmaşık seçicilerin ve sözde öğelerin doğrudan bir yardımcı sınıf karşılığı olmayabilir. Bunları CSS olarak koruyun veya Tailwind yapılandırmanıza ekleyin.