如何在JavaScript中获取Tailwind颜色并用于ApexCharts样式

我之前也碰到过类似的场景——既要用上Tailwind扩展的自定义颜色，又受限于不能直接用CSS类、没法依赖theme()，还不想额外导入配置文件。分享几个我亲测有效的方案：

方案1：直接读取Tailwind生成的CSS变量（推荐） #

Tailwind v3及以上版本会自动把你扩展的颜色注入到:root伪类的CSS变量中，格式是--tw-color-[颜色名]-[色阶]，比如你自定义的red-500对应的变量就是--tw-color-red-500。你可以直接用JS的getComputedStyle获取这个变量的值，再传给ApexCharts配置：

// 获取根元素的计算样式
const rootStyles = getComputedStyle(document.documentElement);
// 提取自定义Tailwind颜色值（记得trim掉空格）
const customRed500 = rootStyles.getPropertyValue('--tw-color-red-500').trim();

// 在ApexCharts配置中使用该颜色
const chartOptions = {
  series: [{
    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
  }],
  colors: [customRed500], // 直接用获取到的颜色值
  // 其他图表配置...
};

new ApexCharts(document.querySelector("#chart"), chartOptions).render();

这个方法不需要额外配置，完全利用Tailwind自动生成的变量，省心又高效。

方案2：抽离颜色配置为独立文件（适合多处复用场景） #

虽然你提到导入配置不是理想方案，但如果把颜色配置单独抽成一个JS文件，让Tailwind配置和ApexCharts代码共同引用，就能避免重复维护：

1. 先创建一个独立的颜色配置文件tailwind-custom-colors.js：

// tailwind-custom-colors.js
export const customColors = {
  red: {
    500: '#ef4444', // 你的自定义red-500颜色值
    600: '#dc2626',
    // 其他需要的色阶...
  },
  // 其他自定义颜色组...
};

2. 在tailwind.config.js中导入这个文件：

// tailwind.config.js
import { customColors } from './tailwind-custom-colors';

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: customColors,
    },
  },
  // 其他Tailwind配置...
};

3. 最后在ApexCharts代码里直接导入使用：

// 图表逻辑文件
import { customColors } from './tailwind-custom-colors';

const chartOptions = {
  colors: [customColors.red[500]],
  // 其他图表配置...
};

这样你只需要维护tailwind-custom-colors.js这一个文件，Tailwind和JS代码都能拿到最新的颜色值，也解决了部分工具类颜色无法导入的问题（因为你定义的是原始色值）。

方案3：全局定义CSS自定义属性（兼容旧版Tailwind） #

如果你的Tailwind版本较低，没有自动生成--tw-color-*变量，可以手动在全局样式里定义对应自定义颜色的CSS变量，再用JS读取：

1. 在全局CSS文件（比如globals.css）中添加：

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

:root {
  --color-red-500: theme('colors.red.500');
  --color-blue-600: theme('colors.blue.600');
  // 其他需要用到的颜色...
}

2. 然后在JS里读取这些变量：

const rootStyles = getComputedStyle(document.documentElement);
const customRed500 = rootStyles.getPropertyValue('--color-red-500').trim();

// 传入ApexCharts配置
const chartOptions = {
  colors: [customRed500],
  // 其他图表配置...
};

这个方法需要手动维护全局变量，但好处是兼容Tailwind v3之前的版本，且变量名可以自定义，更直观。

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