Tailwind Scrollbar not showing

[chromaticmoe]

Tailwind Scrollbar being crossed out in its CSS Rules. I don't know if this is what's causing my scrollbar to not appear.

Below is my code and where am I using it.

'use client';

import Header from "@/app/components/header/header";
import About from "@/app/components/about/about";
import ParticlesBackground from "@/app/components/particles-js/particlesbackground";
import Work from "@/app/components/work/work";

export default function Home() {
  return (
    <div className="relative overflow-x-hidden overflow-y-scroll scrollbar scrollbar-track-color-bg-variant/20  scrollbar-thumb-color-primary/80">
      <ParticlesBackground />
      <Header />
      <About />
      <Work />
    </div>

  )
}

[adoxography]

Rules being crossed out is expected. Chrome (et al.) and Firefox use two wildly different methods for styling scrollbars, so the techniques for one browser will be detected as invalid by the other.

The first thing I'd check here is that the scrollbar you're seeing actually belongs to the element you're styling. That one looks to me like it could be owned by the body or html elements. If you take out your overflow-y-scroll and still see a scrollbar, that would confirm it.

[chromaticmoe]

Rules being crossed out is expected. Chrome (et al.) and Firefox use two wildly different methods for styling scrollbars, so the techniques for one browser will be detected as invalid by the other.

The first thing I'd check here is that the scrollbar you're seeing actually belongs to the element you're styling. That one looks to me like it could be owned by the body or html elements. If you take out your overflow-y-scroll and still see a scrollbar, that would confirm it.

Thank you so much!! That solves my problem.