[V4] Error: addUtilities({ ':root' : … }) defines an invalid utility selector. Utilities must be a single class name and start with a lowercase letter, eg. .scrollbar-none.

[3FrotoDev]

after i add heroUI plugin this show for me
code

// tailwind.config.js
const {heroui} = require("@heroui/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ...
    // make sure it's pointing to the ROOT node_module
    "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [heroui()],
};

[wongjn]

Seems like you're trying to use Tailwind v4 but it seems like Hero UI is not compatible. Consider downgrading to v3:

npm uninstall @tailwindcss/postcss tailwindcss
npm install tailwindcss@3

And follow the steps for v3 PostCSS integration.

[vfa-tanna]

+1

[MeetBhingradiya]

Checkout this might helps you

https://www.heroui.com/docs/guide/tailwind-v4

or Remove this below line from your main css file its is optional

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

[arthurfaraujo]

im also having this same problem, i already did what it says on hero ui docs about migrating to v4, but it doesnt fix the error, the only way of making the error go away is removing the @plugin from the global.css

[VinGitonga]

As @MeetBhingradiya said, consider upgrading using heroui cli, it fixes the issue

npx heroui-cli@latest upgrade --all --beta