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