如何配置Hero UI与TailwindCSS v4？解决样式不显示问题

1. 修正全局样式文件的导入方式 #

你的globals.css里使用了非标准的@source指令，这是导致Hero UI样式无法加载的直接原因。替换为正确的Hero UI样式导入语句：

@import 'tailwindcss';
@import '@heroui/theme/dist/styles.css'; // 导入Hero UI核心样式文件

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

2. 配置Tailwind CSS保留Hero UI类名 #

Tailwind CSS v4会自动移除未被扫描到的CSS类，需要让它识别Hero UI的组件文件，避免这些类被误删。创建或修改tailwind.config.ts：

import type { Config } from 'tailwindcss';

export default {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    // 添加Hero UI组件路径，确保样式类被保留
    '../node_modules/@heroui/react/dist/**/*.{js,ts,jsx,tsx}',
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

3. 完善PostCSS配置（可选） #

如果上述步骤后仍有问题，在PostCSS配置中添加autoprefixer，确保Hero UI样式的兼容性：

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

4. 重启服务并清除缓存 #

修改配置后，关闭现有开发服务，清除缓存再重启：

rm -rf .next
npm run dev

内容的提问来源于stack exchange，提问作者Gazi