Tailwind CSS Nedir?

Tailwind CSS, HTML'nizde doğrudan tasarımlar oluşturmak için düşük seviyeli yardımcı sınıflar sağlayan bir utility-first CSS framework'üdür. Özel CSS yazmak yerine, flex, pt-4, text-center gibi önceden hazırlanmış sınıfları doğrudan öğelere uygularsınız. Bu yaklaşım geliştirmeyi hızlandırır, dosya boyutunu azaltır ve özel stil sayfalarına ve CSS adlandırma kurallarına ihtiyaç duymadan daha sürdürülebilir kod oluşturur.

Araç Açıklaması

Bu araç, geleneksel CSS kodunu anında Tailwind CSS yardımcı sınıflarına dönüştürür. CSS stillerinizi yapıştırmanız yeterlidir; araç her seçici için eşdeğer Tailwind sınıflarını üretir. Dönüştürücü, yaygın CSS özelliklerini işler ve çıktıyı seçici adları ardından ilgili Tailwind sınıfları gelecek şekilde otomatik olarak biçimlendirir, böylece Tailwind CSS'e geçiş sorunsuz olur.

Örnekler

Input (CSS):

.button {
  display: flex;
  padding: 16px;
  background-color: #3b82f6;
  color: white;
  border-radius: 8px;
}

Output (Tailwind):

.button
flex p-4 bg-blue-500 text-white rounded-lg

Input (CSS):

.container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

Output (Tailwind):

.container
max-w-7xl mx-auto text-center

Özellikler

  • Tek yönlü CSS'ten Tailwind'e dönüşüm
  • Otomatik sözdizimi doğrulama
  • Çıktıda seçici adlarını korur
  • Birden fazla CSS kuralını aynı anda işler
  • Yaygın CSS özelliklerini ve değerlerini destekler

Kullanım Senaryoları

  • Mevcut projeleri geleneksel CSS'ten Tailwind CSS'e taşıma
  • Tanıdık CSS özelliklerinin Tailwind eşdeğerlerini öğrenme
  • Tasarım sistemi stillerini yardımcı sınıflara dönüştürme
  • Özel CSS yazmak yerine Tailwind ile hızlı prototipleme
  • Eski stil sayfalarını modern utility-first yaklaşıma yeniden yapılandırma