Tailwind Oyun Alanı

Tailwind CSS sınıflarını gerçek zamanlı olarak test edin ve önizleyin.

Ayarlar
Öğe türünü ve içeriğini yapılandırın
Hazır Ayar Örnekleri
Sık kullanılan stil kombinasyonlarını hızlıca uygulayın
Button
Card
Badge
Alert
Input
Önizleme
Gerçek zamanlı stilize edilmiş sonucu görün
Merhaba, Tailwind!
Oluşturulan HTML
Mevcut ayarlarla oluşturulan HTML kodu
<div className="bg-blue-500 text-white p-4 rounded-lg shadow-md hover:bg-blue-600 transition-colors">Merhaba, Tailwind!</div>
💡 Kullanım İpuçları

Ortak Sınıflar:

  • hover: - Üzerine gelme durumu stilleri
  • focus: - Odak durumu stilleri
  • active: - Aktif durum stilleri
  • transition-colors - Renk geçiş efektleri

Duyarlı Sınıflar:

  • sm: - 640 piksel ve üzeri
  • md: - 768 piksel ve üzeri
  • lg: - 1024 piksel ve üzeri
  • xl: - 1280 piksel ve üzeri
    Tailwind Oyun Alanı