TailwindCSS v4自定义颜色在Next.js中不生效求助

问题根源 #

Tailwind v4 需要明确指定要扫描的文件路径来生成对应的工具类，你的配置中缺少了 tailwind.config.js 文件，导致Tailwind无法识别 bg-bermuda 类并生成对应的样式。

修复步骤 #

1. 添加Tailwind配置文件 #

在项目根目录创建 tailwind.config.js，填入以下内容：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

该配置让Tailwind扫描你的Next.js应用中所有可能使用Tailwind类的文件。

2. 验证全局CSS配置 #

你的 global.css 写法是正确的，保持不变即可：

@import "tailwindcss";
@theme {
  --color-bermuda: #78dcca;
}

3. 检查依赖安装 #

确保已安装正确的依赖包：

npm install tailwindcss @tailwindcss/postcss postcss --save-dev

4. 重启开发服务器 #

修改配置文件后，需要重启Next.js开发服务器才能让更改生效：

npm run dev

替代方案（可选） #

如果仍有问题，可以尝试在 tailwind.config.js 中直接定义自定义颜色，而非使用CSS的 @theme 指令：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        bermuda: "#78dcca",
      },
    },
  },
  plugins: [],
};

这种方式同样能生成 bg-bermuda 等工具类，且兼容性更稳定。

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