Tailwind 自定义主题颜色不透明度不适用于 Reactjs答案

【问题标题】：Tailwind custom theme color opacity not applys in ReactjsTailwind 自定义主题颜色不透明度不适用于 Reactjs
【发布时间】：2022-07-01 23:04:34
【问题描述】：

我正在开发一个使用 Tailwindcss 作为 CSS 框架的 Reactjs 项目，并尝试使用我的自定义颜色构建一个自定义主题。我在index.css 文件中将它们定义为CSS 变量。但 alpha 值不适用于这些颜色。这是 CSS 颜色值：

 @layer base {
:root {
    --base: 26 27 27;
    --light: 43 43 43;
    --lighter: 81 81 81;
    --text-base: 235 235 235;
    --text-inverted: 71 72 72;
    --color-primary: 241 218 19;
    --color-primary-light: 245 226 66;
    --color-danger: 243 75 19;
    --color-danger-light: 245 111 66;
    --color-accent: 242 142 19;
    --color-accent-light: 245 165 66;
    --color-secondary: 235 235 235
   }
}

我在tailwind.config.js 文件中配置了一个自定义主题，如下所示：

module.exports = {
content: [
    "./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
    extend: {
        colors: {
            skin: {
                base: 'rgb(var(--base) / <alpha-value>)',
                light: 'rgb(var(--light) / <alpha-value>)',
                primary:'rgb(var(--color-primary) / <alpha-value>)',
                lprimary: 'rgb(var(--color-primary-light) / <alpha-value>)',
                danger: 'rgb(var(--color-danger) / <alpha-value>)',
                dangerLight: 'rgb(var(--color-danger-light) / <alpha-value>)',
                accent: 'rgb(var(--color-accent) / <alpha-value>)',
                laccent: 'rgb(var(--color-accent-light) / <alpha-value>)',
                secondary: 'rgb(var(--color-secondary) / <alpha-value>)'
            }
        },
        backgroundColor: {
            skin: {
                base: 'rgb(var(--base) / <alpha-value>)',
                light: 'rgb(var(--light) / <alpha-value>)',
                primary:'rgb(var(--color-primary) / <alpha-value>)',
                lprimary: 'rgb(var(--color-primary-light) / <alpha-value>)',
                danger: 'rgb(var(--color-danger) / <alpha-value>)',
                ldanger:'rgb(var(--color-danger-light) / <alpha-value>)',
                secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
                accent: 'rgb(var(--color-accent) / <alpha-value>)',
                laccent: 'rgb(var(--color-accent-light) / <alpha-value>)',
            }
        },
        textColor: {
            skin: {
                base: 'rgb(var(--text-base) / <alpha-value>)',
                inverted: 'rgb(var(--text-inverted) / <alpha-value>)',
                primary: 'rgb(var(--color-primary) / <alpha-value>)',
                hover: 'rgb(var(--color-primary-light) / <alpha-value>)',
                secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
            }
        },
        borderColor: {
            skin: {
                primary: 'rgb(var(--color-primary) / <alpha-value>)',
                hover: 'rgb(var(--color-primary-light) / <alpha-value>)',
            }
        }
    },
}};

但是当我使用类似bg-skin-base-100 的东西时，alpha 值 不适用。有人知道为什么它在我的 Reactjs 项目中会这样吗？

【问题讨论】：

标签： reactjs frontend tailwind-css

【解决方案1】：

我认为您的tailwind.config.js 中需要一个函数。 Here is a playground from Tailwind Labs，在配置中带有一个名为 withOpacity 的函数。在您的顺风配置中，您可以在定义颜色时调用它：

base: withOpacity('--base'),

你可以在this video 看到工作，从大约 17 分钟到结束。

希望这会有所帮助。

【讨论】：