How to config Hero UI with TailwindCSS v4

Here are the details:

• Next.js v15.x
• TailwindCSS v4.x
• Hero UI: latest

Tailwind classes work but Hero UI not showing styling at all.

package.json

{
  "dependencies": {
    "@heroui/react": "^2.7.6",
    "axios": "^1.8.4",
    "framer-motion": "^12.6.5",
    "next": "15.3.0",
    "next-auth": "^4.24.11",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@tailwindcss/postcss": "^4.1.3",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "autoprefixer": "^10.4.21",
    "eslint": "^9",
    "eslint-config-next": "15.3.0",
    "postcss": "^8.5.3",
    "tailwindcss": "^4.1.3",
    "typescript": "^5"
  }
}

postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

globals.css

@import 'tailwindcss';
@source '../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';

@custom-variant dark (&:is(.dark *));

How can I solve this?

HeroUI actively working on TailwindCSS v4 support

You mentioned that you're using HeroUI v2.7.6:

{
  "dependencies": {
    "@heroui/react": "^2.7.6",
  }
}

However, support for TailwindCSS v4 is still actively in development and currently only available in the beta version:

We're actively working on Tailwind CSS v4 support! You can check out our beta version at beta.heroui.com.

• Release Note: HeroUI v2.7.0 - What's next? - HeroUI Docs

So, for TailwindCSS v4 support, you'll need at least v2.8; that is, the current HeroUI beta.

• HeroUI Beta Docs
• TailwindCSS v4 Support - HeroUI Beta Docs

npm install @heroui/react@beta

Note: Although the migration step mentions using the JS-based legacy configuration for TailwindCSS v4, I believe it's not mandatory.

TIP: For a production project, I recommend waiting for the next stable release. TailwindCSS v3 can be migrated to v4 later as well.

Automatic Source Detection

Starting with TailwindCSS v4, automatic source detection is integrated. It knows which files to scan and where to look. However, it ignores paths listed in .gitignore, including node_modules. That's why it's necessary to specify the path to certain packages that need to be scanned; but simply providing the path is sufficient:

• Automatic Source Detection from TailwindCSS v4 - StackOverflow
• TailwindCSS v4 does not apply styles in packages/components - StackOverflow

./src/global.css

@import 'tailwindcss';

@source '../node_modules/@heroui/theme/dist';

@custom-variant dark (&:is(.dark *));

Note: Remember that the @source directive expects a relative path starting from the folder of the current CSS file. So, based on the path you mentioned in your question, your global.css is presumably one level deeper than node_modules, for example, located in the src folder. (In the case of ./src/css/global.css, the path would already be something like ./../../node_modules...).