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