React + Vite projemde global scrollbar CSS'i çalışmıyor - Tailwind CSS override sorunu

2
●
134

Question

Teknoloji Stack:React 19.1.0
Vite 6.3.5 (build tool)
TypeScript 5.0.2
Tailwind CSS 4.0.0
React Router DOM 6.21.0
Sorun:Global scrollbar CSS'i (::-webkit-scrollbar) çalışmıyor
Tailwind CSS'in kendi scrollbar utility'leri override ediyor
!important ekledim ama hâlâ çalışmıyor
Hard refresh yaptım ama değişiklik yok
Denediğim Çözümler:Global CSS'e scrollbar stilleri ekledim
!important ile zorla uygulamaya çalıştım
Inline CSS denedim
CSS-in-JS ile component içinde tanımladım
Borderi 0px yapıyorum hala köseli kalıyor, buttonları gizliyorum gitmiyor, yardımcı olabilecek var mı? önemli benim için..

ahmetkucukonder · Answer

"tailwind-scrollbar" eklentisini import edin
<html> tagine scrollbar classını ekleyin
Tailwind'ı dahil ettiğini main css dosyanızda:
@plugin "tailwind-scrollbar"
@layer utilities {
  .scrollbar{
    &::-webkit-scrollbar {
      @apply w-2;
    }
    &::-webkit-scrollbar-track {
      @apply bg-amber-200;
    }
    &::-webkit-scrollbar-thumb {
      @apply rounded-full bg-amber-400;
    }
  }
}Overflow-y scroll kullandığınız divlerde scrollbar classını dahil edebilirsiniz
CSS harici kullanım için dokümantasyonu inceleyebilirsiniz (örneklerin güncel zamanda doğru çalıştığına emin değilim, bende width gibi özellikler çalışmadı belki daisyui kaynaklıdır)

Chrome scrollbar-color özelliğini destekliyor, eğer scrollbar-color ile tanımlama yaparsanız webkit ile scrollbara width vb. değerleri atayamıyorsunuz ancak bunu yapmadığınız zaman da firefox tarafında özelleştirme yapamıyorsunuz. Firefox tarafı için ekstra araştırma yapabilirsiniz, zannedersem örnekler de bu yüzden çalışmıyor çünkü color ataması yaptığınızda scrollbar-color ve webkit olarak renk atıyor ve scrollbar-color atandığı için scrollbar width gibi atamalar devredışı kalıyor.

turgutsahin · Answer

ahmetkucukonder adlı üyeden alıntı:						mesajı görüntüle									"tailwind-scrollbar" eklentisini import edin
<html> tagine scrollbar classını ekleyin
Tailwind'ı dahil ettiğini main css dosyanızda:
@plugin "tailwind-scrollbar"
@layer utilities {
  .scrollbar{
    &::-webkit-scrollbar {
      @apply w-2;
    }
    &::-webkit-scrollbar-track {
      @apply bg-amber-200;
    }
    &::-webkit-scrollbar-thumb {
      @apply rounded-full bg-amber-400;
    }
  }
}Overflow-y scroll kullandığınız divlerde scrollbar classını dahil edebilirsiniz
CSS harici kullanım için dokümantasyonu inceleyebilirsiniz (örneklerin güncel zamanda doğru çalıştığına emin değilim, bende width gibi özellikler çalışmadı belki daisyui kaynaklıdır)

Chrome scrollbar-color özelliğini destekliyor, eğer scrollbar-color ile tanımlama yaparsanız webkit ile scrollbara width vb. değerleri atayamıyorsunuz ancak bunu yapmadığınız zaman da firefox tarafında özelleştirme yapamıyorsunuz. Firefox tarafı için ekstra araştırma yapabilirsiniz, zannedersem örnekler de bu yüzden çalışmıyor çünkü color ataması yaptığınızda scrollbar-color ve webkit olarak renk atıyor ve scrollbar-color atandığı için scrollbar width gibi atamalar devredışı kalıyor. 		cok tesekkurler deneyeceğim.