为何Next.js中用常量定义Tailwind自定义颜色不生效？

问题原因 #

Tailwind CSS的JIT（即时编译）编译器依赖静态扫描代码中的className字符串生成对应CSS样式。如果用JavaScript常量存储颜色值，再通过动态拼接生成className（比如bg-${MY_COLOR}），编译器在构建阶段无法解析这个动态生成的字符串，也就不会生成对应的CSS类，最终导致样式不生效。

而直接写bg-[#FFF8F5]这类属于Tailwind的任意值语法，编译器能直接识别并生成对应的样式规则，所以能正常生效。

可行解决方案 #

方案1：在Tailwind配置中定义自定义颜色 #

把常用颜色统一加到tailwind.config.js的theme.colors里，直接使用语义化类名，完全规避动态拼接问题。

示例配置：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        'cream': '#FFF8F5',
        'golden': '#E1B168',
      },
    },
  },
  plugins: [],
}

组件中使用：

<div className="bg-cream text-golden">示例内容</div>

方案2：用任意值语法配合常量（无需修改配置） #

如果必须用常量存储色值，结合Tailwind的任意值语法，用模板字符串编写完整类名结构，确保编译器能识别：

const BG_COLOR = '#FFF8F5';
const TEXT_COLOR = '#E1B168';

<div className={`bg-[${BG_COLOR}] text-[${TEXT_COLOR}]`}>示例内容</div>

注意：要确保使用该常量的组件文件在tailwind.config.js的content配置范围内，否则编译器扫描不到。

方案3：使用CSS变量实现复用 #

通过全局CSS定义变量，再在Tailwind中引用，既能实现颜色复用，又能被编译器识别。

首先在globals.css中定义变量：

:root {
  --color-cream: #FFF8F5;
  --color-golden: #E1B168;
}

然后有两种使用方式：

• 直接用任意值语法引用变量：

<div className="bg-[var(--color-cream)] text-[var(--color-golden)]">示例内容</div>

• 在Tailwind配置中映射变量，使用语义化类名：

// tailwind.config.js
theme: {
  extend: {
    colors: {
      'cream': 'var(--color-cream)',
      'golden': 'var(--color-golden)',
    },
  },
}

组件中使用：

<div className="bg-cream text-golden">示例内容</div>

注意事项 #

• 确保tailwind.config.js的content字段包含所有使用颜色常量的组件/页面文件，否则JIT编译器无法扫描到相关类名。
• 如果是运行时动态获取的颜色值（比如从接口返回），Tailwind无法提前生成样式，这种情况建议直接使用内联样式（style={{ backgroundColor: dynamicColor }}）。

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