Tailwind CSS 中的动态颜色

Question

是否可以在顺风配置中使颜色动态化。

我想通过 api 从后端接收所需的颜色（主要、重音） 。

因此用户可以从管理面板更改颜色。

我想从 api 获取这个十六进制值

Answer 1

您可以尝试获取CSS 变量来更改调色板而不更改tailwind.config.js

配置文件：

module.exports = {
  theme: {
    extend: {
      colors: {
        "primary": {
            100:"var(--primary-color-100)",
            200:"var(--primary-color-200)",
           },
        "accent": "var(--accent-color)"
      },
    },
  },
};

CSS 文件：

:root {
  --primary-color-100: #fff;
  --primary-color-200: #fff00;
  --accent-color: #000;
}

Answer 2

是的，这是可能的primary，但您需要返回完整的字符串，例如bg-primary（因为 tailwind 仅识别该字符串），您的primary颜色应在tailwind.config.js文件中定义。

例如，您可以参考我对这个问题的回答。