tailwind-cssscrollbartailwind-css-4

Why tailwind-scrollbar plugin doesn't work?

I have already followed all installation steps either from the documentation or from tutorial videos. I see that my configuration is already correct, but the scrollbar still didn't work properly.

package.json

{
  "scripts": {
    "tailwind": "tailwindcss -i ./src/main/resources/static/css/input.css -o ./src/main/resources/static/css/styles.css --watch"
  },
  "dependencies": {
    "@tailwindcss/cli": "^4.0.15",
    "tailwindcss": "^4.0.15"
  },
  "devDependencies": {
    "tailwind-scrollbar": "^4.0.2"
  }
}

tailwind.config.js

module.exports = {
  content: ["./src/main/resources/templates/**/*.html"],
  theme: {
    extend: {},
  },
  plugins: [require("tailwind-scrollbar")],
};

I want to use scrollbar here:

<section class="font-opensans pb-4 overflow-x-scroll scrollbar scrollbar-thumb-red-500 scrollbar-track-red-100">
  <table class="w-500">
    <thead></thead>
    <tbody></tbody>
  </table>
</section>

Could you guys help me to find what's wrong with my code?

Solution

  • TLDR: Due to the breaking changes introduced in v4, although you might think the plugin was successfully installed, it was actually done incorrectly - so it's not properly included in the project, which is why the specified class doesn't work as expected. To fix this, you need to use the @plugin directive introduced in the CSS-first configuration. See below.

    Starting from TailwindCSS v4, the CLI commands have been separated into a dedicated package — which you have installed. However, along with this change, the command itself has also been updated: instead of using npx tailwindcss, you should now use npx @tailwindcss/cli.

    Using the tailwindcss command alone suggests to me that you're running TailwindCSS in Standalone mode rather than using the CLI. So if you're using the CLI, I would modify the command as follows:

    {
  "scripts": {
    "tailwind": "npx @tailwindcss/cli -i ./src/main/resources/static/css/input.css -o ./src/main/resources/static/css/styles.css --watch"
  },
}

    New CSS-first configuration from v4 (recommended)

    Starting from v4, the configuration has changed, and instead of using the JavaScript-based tailwind.config.js, now use a CSS-first configuration approach. This is what's causing the error mentioned in your question - no matter what you put into tailwind.config.js, it will be completely ignored. Instead, use the following:

    ./src/main/resources/static/css/input.css

    @import "tailwindcss";

@plugin 'tailwind-scrollbar';

@theme {
  /* Using the attached documentation, you can add your own colors, fonts, etc. here instead of tailwind.config.js theme.extend property. */
}

    Note: The tailwind.config.js file can be deleted going forward, as it is no longer needed.

    Note: Since you haven't shared your main CSS file, I'll just note as a side comment that starting from v4, the @tailwind directives are deprecated and should be replaced with @import "tailwindcss";.

    How to use legacy JavaScript-based configuration

    If you still prefer to stick with the legacy JavaScript-based configuration, you can do it like this:

    ./src/main/resources/static/css/input.css

    @import "tailwindcss";

@config "./../../../../../tailwind.config.js";

@plugin 'tailwind-scrollbar';

    ./tailwind.config.js

    export default {
  // Starting from v4, this parameter no longer exists. Instead, you must use the @source CSS directive, but only if something isn't automatically detected by v4 due to an exclusion
  // content: ["./src/main/resources/templates/**/*.html"],

  theme: {
    extend: {
      // ...
    },
  },

  // No longer needed. Use @plugin CSS directive.
  // plugins: [],
};

    Automatic Source Detection

    As I mentioned, starting from v4, the content property has been removed from the config file, so you can no longer use it. Instead, you must use the @source CSS directive - even alongside the config file. However, from v4 onwards, an automatic source detection feature has been integrated, which automatically scans and analyzes all source files except those listed in the .gitignore and the node_modules folder. For example, if you want to make a package detectable, the @source directive can be useful, as it allows you to supplement the automation with the package's file path. You can learn more about this in other more relevant questions:

    Related breaking changes