TailwindCSS自定义颜色无法在JavaScript中访问的问题求助

我们团队最近碰到了一个Tailwind CSS自定义颜色的棘手问题，想请大家帮忙排查下问题所在：

我们已经在根目录的tailwind.config.js里配置了自定义颜色，项目结构如下：

public
src
package.json
postcss.config.js
tailwind.config.js

这些自定义颜色在HTML标签里使用完全正常，比如bg-prod-100能正确渲染样式，但在Chart.js中，我们尝试通过tailwindConfig().theme.colors.prod[100]来引用这些颜色时，发现自定义的prod系列颜色根本不在tailwindConfig().theme.colors对象里，只有Tailwind的默认颜色能被正常访问到。

另外，如果我们尝试直接从src目录外导入tailwind.config.js文件，还会触发这个错误：

Module not found: Error: You attempted to import ../../tailwind.config which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

以下是我们的相关代码：

Chart.js中的使用代码 #

let dataObj = {
  dates: [],
  labels: [],
  datasets: [
    {
      label: "Idle Minutes",
      data: [],
      fill: true,
      backgroundColor: tailwindConfig().theme.colors.prod[100],
      borderColor: tailwindConfig().theme.colors.prod[500],
      borderWidth: 2,
    }
  ]
}

完整的tailwind.config.js文件 #

const plugin = require("tailwindcss/plugin");
const colors = require("tailwindcss/colors");

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./public/index.html",
  ],
  theme: {
    colors: {
      ...colors,
      tempBlueLight: "#06A8FF",
      prod: {
        100: "#E8FCF6",
        200: "#A4F4D9",
      }
    },
    extend: {
      outline: {
        blue: "2px solid rgba(0, 112, 244, 0.5)"
      },
      fontFamily: {
        inter: ["Inter", "sans-serif"]
      }
    }
  },
  variants: [
    "responsive",
    "group-hover",
    "visited",
    "disabled"
  ],
  plugins: [
    require("@tailwindcss/forms"),
    require("flowbite/plugin"),
    plugin(function ({ addComponents, theme }) {
      const screens = theme("screens", {});
      addComponents([
      ]);
    })
  ]
};

我们检查过配置文件的路径和语法，看起来都没有问题，但就是没法在JS代码里拿到自定义颜色。有没有大佬能指点一下我们哪里做错了？

备注：内容来源于stack exchange，提问作者Mister AD