Arkadaşlar selam, son birkaç gündür React projemde Tailwind CSS kullanıyorum ve çok sevdim aslında, gerçekten hızlı bir şekilde stil verebiliyorum. Ama bir sorunum var ki beni deli ediyor: hover efektleri çalışmıyor. Mesela bir butona "hover:bg-blue-700" veriyorum, normalde bg-blue-500 var, üzerine gelince renk değişmiyor. Chrome'da inspect ediyorum, sınıf isimleri doğru gözüküyor ama hiçbir hover durumu tetiklenmiyor. CSS dosyasını kontrol ettim, Tailwind'in importu falan tamam, başka stiller çalışıyor sadece hover efektleri yok. Acaba bir yerde ezilme mi oluyor yoksa React'in virtual DOM'uyla mı alakalı? Başına gelen var mı?
Bir de şu durum var: className içinde "group" kullanıyorum, parent'a "group" verip child'a "group-hover:opacity-100" yapıyorum, o da çalışmıyor. Normalde çalışması lazım, Tailwind'in dokümantasyonunda da böyle anlatılıyor. Ama child element kesinlikle tepki vermiyor. Acaba Tailwind'in versiyonuyla mı ilgili? Ben v3.4 kullanıyorum, belki bir güncelleme sonrası syntax değişmiş olabilir mi? Yoksa ben mi yanlış anlıyorum? Aklımda soru işareti kaldı, net bir çözüm bulamadım.
Son olarak, bu sorun sadece belirli componentlerde mi oluyor diye test ettim. Mesela direkt App.js içinde yazdığım bir butonda hover çalışırken, bir component'in içinde aynı kodu kullanınca çalışmıyor. Bu da acaba Tailwind'in JIT (Just-in-Time) derleyicisiyle ilgili bir cache sorunu mu? "npm run dev"i yeniden başlatınca bazen düzeliyor bazen yine aynı. Deneyimli arkadaşlar varsa, bir el atsın lütfen. Yoksa ben mi "!important" kullanmaya başlayacağım mecburen? Ama Tailwind'in ruhuna aykırı geliyor. Tartışmaya açık bir konu, herkesin fikrini duymak isterim.
Bir de şu durum var: className içinde "group" kullanıyorum, parent'a "group" verip child'a "group-hover:opacity-100" yapıyorum, o da çalışmıyor. Normalde çalışması lazım, Tailwind'in dokümantasyonunda da böyle anlatılıyor. Ama child element kesinlikle tepki vermiyor. Acaba Tailwind'in versiyonuyla mı ilgili? Ben v3.4 kullanıyorum, belki bir güncelleme sonrası syntax değişmiş olabilir mi? Yoksa ben mi yanlış anlıyorum? Aklımda soru işareti kaldı, net bir çözüm bulamadım.
Son olarak, bu sorun sadece belirli componentlerde mi oluyor diye test ettim. Mesela direkt App.js içinde yazdığım bir butonda hover çalışırken, bir component'in içinde aynı kodu kullanınca çalışmıyor. Bu da acaba Tailwind'in JIT (Just-in-Time) derleyicisiyle ilgili bir cache sorunu mu? "npm run dev"i yeniden başlatınca bazen düzeliyor bazen yine aynı. Deneyimli arkadaşlar varsa, bir el atsın lütfen. Yoksa ben mi "!important" kullanmaya başlayacağım mecburen? Ama Tailwind'in ruhuna aykırı geliyor. Tartışmaya açık bir konu, herkesin fikrini duymak isterim.