tailwind 配置文件无法访问

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,
}
]
}

所有顺风默认颜色都可用，但我们的自定义颜色不存在。

从 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);
    /* ... */
  }
}