如何在react-chartjs-2中直接使用Tailwind自定义颜色名设置图表背景色？

核心结论 #

不能直接用Tailwind自定义颜色名（如cc1、cc2）给Chart.js的backgroundColor赋值。Chart.js需要的是CSS可识别的标准颜色值（十六进制、RGB、HSL、内置颜色名等），它不会读取Tailwind的配置文件，所以你写的'cc1'对Chart.js来说只是无效的字符串。

解决方案（无需手动重复写十六进制值） #

1. 从Tailwind配置中导入颜色值

把Tailwind的自定义颜色抽成独立模块，让Chart组件和Tailwind共用同一套配置，避免重复维护：

• 改造tailwind.config.js：

// tailwind.config.js
export const customColors = {
  cc1: '#0099CC',
  cc2: '#ED1A37',
};

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: customColors,
    },
  },
  plugins: [],
};

• 在Chart组件中导入使用：

// 你的环形图组件文件
import { customColors } from '../tailwind.config.js'; // 路径根据实际项目调整

const data = {
  labels: ['标签1', '标签2'],
  datasets: [
    {
      data: [40, 60],
      backgroundColor: [customColors.cc1, customColors.cc2],
      offset: 5,
    },
  ],
};

2. 用CSS变量间接引用

通过全局CSS定义对应Tailwind颜色的变量，再在Chart.js中引用这些变量：

• 在全局样式文件（如src/index.css）中添加：

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --cc1: theme('colors.cc1');
  --cc2: theme('colors.cc2');
}

• 在Chart组件中使用CSS变量：

const data = {
  labels: ['标签1', '标签2'],
  datasets: [
    {
      data: [40, 60],
      backgroundColor: ['var(--cc1)', 'var(--cc2)'],
      offset: 5,
    },
  ],
};

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