Tailwind 自定义主题颜色不透明度未应用

Question

我正在开发一个Reactjs项目，该项目使用Tailwind CSS作为我的 CSS 框架，并且我正在尝试使用自定义颜色构建一个主题。

我在文件中将颜色定义为 CSS 变量index.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>)',
                }
            }
        },
    }};

但是，当我使用像 alpha 值这样的类时，bg-skin-base-100不会应用该类。

有谁知道为什么它会这样？

Answer 1

要更改颜色实用程序类的不透明度，您需要附加斜杠和不透明度值 (0-100)，而不是破折号。例如，bg-skin-base/50将使用不透明度.5。

在您的情况下，这将导致 CSS: color: rgb(26 27 27/.5)。

详细信息和示例在这里：https ://tailwindcss.com/docs/text-color#chang-the-opacity