如何在顺风预设中使用自定义 CSS 颜色？答案

【问题标题】：How to use custom CSS colors in my tailwind preset?如何在顺风预设中使用自定义 CSS 颜色？
【发布时间】：2023-01-17 22:37:10
【问题描述】：

我正在使用具有多种颜色主题的 tailwind 3，并且该主题将用于多个应用程序。我想制作一个预设并将其添加为对我的存储库的依赖，但我遇到以下问题：

我的主题严重依赖 CSS 变量来工作。它的结构是这样的：
索引.css

@layer base {
    :root {
        --default-color: 255,255,255;
    }
    #bright-theme {
        --default-color: 0,0,0;
    }
    /* Next themes here */
}

tailwind-config.js

module.exports={
    theme: {
        extend: {
            colors: {
                'element-base': `rgba(var(--default-color))`,
                // etc...
            }
        }
    }
}

有没有办法将 css 变量与我的主题一起发送？否则没有意义这样做。如果需要，我可以更改预设/主题的结构。我不能使用来自 tailwind 的 dark mode 选项，因为我有不止一种变体。

【问题讨论】：

标签： css reactjs tailwind-css tailwind-3

【解决方案1】：

你几乎已经搞定了，只需去掉rgba 的包裹即可。

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

:root {
  --default-color: #fff;
}

在您的tailwind.config.js 中将其用作：

module.exports = {
  theme: {
    extend: {
      colors: {
        "element-base": "var(--default-color)",
      },
    },
  },
};

有关更多信息，请参阅此 GFG 帖子 How to use css variables with tailwind-css

【讨论】：