Tailwind CSS extend配置自定义颜色及背景色不生效如何解决？

• 核心错误：你当前配置中backgroundColor扩展项的自定义键名额外加了bg-前缀，Tailwind生成背景类时会自动拼接bg-前缀，你写的bg-r-c作为键名最终生成的类是bg-bg-r-c，和你预期使用的bg-r-c不匹配，因此不生效。
• 其他可能诱因：
  • tailwind.config.js中的content路径配置错误，未覆盖你存放页面/组件代码的文件路径，Tailwind没有扫描到你使用的自定义类，不会生成对应样式
  • 修改配置后未重启开发服务，新配置未加载
  • 代码中使用字符串拼接生成类名（如bg-${dynamic}-c），Tailwind默认JIT模式无法识别动态拼接的类名，不会生成对应样式

方式1：全局扩展颜色（推荐） #

把自定义颜色放在colors扩展项中，所有颜色相关工具类（背景、文字、边框、阴影等）都可以使用：

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 务必保证content路径覆盖所有使用Tailwind类的文件
  content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"],
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
        'r-c': 'rgba(144, 44, 20, 1)',
        'b-c': 'rgba(38, 70, 83, 1)',
        'b2-c': 'rgba(42, 157, 143, 1)',
        'beige-c': 'rgba(233, 199, 114, 1)',
        'beige2-c': 'rgba(244, 162, 97, 1)'
      },
    },
  },
  plugins: []
}

使用示例：

<!-- 背景色 -->
<div class="bg-r-c"></div>
<!-- 文字色 -->
<p class="text-b-c"></p>
<!-- 边框色 -->
<div class="border border-beige-c"></div>

方式2：仅扩展背景色 #

如果你只想让自定义颜色仅用于背景类，其他颜色工具类不可用，可以单独扩展backgroundColor，注意键名不要加bg-前缀：

theme: {
  extend: {
    colors: {
      'regal-blue': '#243c5a',
    },
    backgroundColor: {
      'r-c': 'rgba(144, 44, 20, 1)',
      'b-c': 'rgba(38, 70, 83, 1)',
      'b2-c': 'rgba(42, 157, 143, 1)',
      'beige-c': 'rgba(233, 199, 114, 1)',
      'beige2-c': 'rgba(244, 162, 97, 1)'
    } 
  },
},

使用示例：

<div class="bg-r-c"></div>

• 配置修改完成后重启本地开发服务
• 确保代码中写的类名和生成规则完全匹配，不要使用动态拼接的类名
• 打开浏览器元素检查器，查看对应元素是否加载了自定义的背景样式

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