scrollbar-hide class doesn't work in Tailwind CSS v4 even after config setup

[usenol]

Hi,
I'm using Tailwind CSS v4 and trying to use the scrollbar-hide class via the tailwind-scrollbar-hide plugin, but unfortunately I can't get it to work. The scrollbar is still visible even after following the setup steps.

Here’s what I’ve tried:

1. Installed the plugin with npm:
   npm install tailwind-scrollbar-hide

2. I saw that the documentation recommends this in index.css:
   @config "../../tailwind.config.js";

But Tailwind v4 throws an error and doesn't allow this kind of import — @config is not supported directly in CSS files anymore (or has limitations in v4).

3. I also created a tailwind.config.js manually and added the plugin:

const scrollbarHide = require('tailwind-scrollbar-hide');

module.exports = {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [scrollbarHide],
}

But even after restarting the dev server (npm run dev), the class scrollbar-hide still has no effect — it doesn't appear in DevTools and no CSS is applied.

❓Question:
Is tailwind-scrollbar-hide officially compatible with Tailwind CSS v4?
If so, is there a working example or something I may be missing?
Thanks!

[njho]

Same thing that's happening on my end :|

[njho]

Adding this to global.css should do the trick in V4:

@import "tailwindcss";

@utility scrollbar-hide {
  /* Firefox */
  scrollbar-width: none;
  
  /* IE and Edge */
  -ms-overflow-style: none;
  
  /* Chrome, Safari and Opera */
  &::-webkit-scrollbar {
    display: none;
  }
}

@utility scrollbar-default {
  /* Firefox */
  scrollbar-width: auto;
  
  /* IE and Edge */
  -ms-overflow-style: auto;
  
  /* Chrome, Safari and Opera */
  &::-webkit-scrollbar {
    display: block;
  }
} 

[reslear]

@njho yes indeed tailwind 4 is ready for css implementation, but I've made v4 release #32, and i've added a link to example in the Note.