TailwindCss 自定义颜色无法在 javascript 中访问

Question

我对 tailwindcss 自定义颜色有疑问。我们在 tailwind.config.js 中添加了自定义颜色。 tailwind 配置文件位于根目录中。

public
src
package json
postcss config js
tailwind config js

这些颜色适用于 html 标签，例如“bg-prod-100”。但是我们在chart.js中也需要这些颜色，我们只能使用tailwindConfig().theme.colors.prod[100]

将颜色分配给图表

像下面这样

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([       
  ]);
})
]
};

所有的 tailwind 默认颜色都可用，但这里不存在我们的自定义颜色 tailwindConfig().theme.colors。

从 src 文件夹外部访问文件，然后显示此错误

找不到模块：错误：您尝试导入位于项目 src/ 目录之外的 ../../tailwind.config。不支持 src/ 之外的相对导入。

有人知道我们做错了什么吗？

Answer 1

如果您的代码处于 React Tailwind 中，请按照以下代码在 Tailwind 配置文件中使用自定义颜色........

复制完整代码并将其粘贴到您的

tailwind.config.js

文件中

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: "#3B9DF8",
        secondary: "#ffffff",
        border: "#e5eaf2",
        text: "#424242",
      },
    },
  },
  plugins: [],
};

或者，如果您只有一个 HTML 和 tailwind CSS 项目，并且想要在 tailwind 配置中设置自定义颜色，请按照下面的代码操作......

@layer base {
  :root {
    --color-primary: rgb(255 115 179);
    --color-secondary: rgb(111 114 185);
    /* ... */
  }
}