Tailwind自定义主题颜色的透明度未生效。

Question

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

我在 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的类时，透明度值并未被应用。

有人知道为什么会出现这种情况吗？

- Pouya Kermanshahi

---

你正在使用最新版本的Tailwind吗，即3.14？ <alpha-value>方法是在v3.1中添加的（https://tailwindcss.com/blog/tailwindcss-v3-1#easier-css-variable-color-configuration）。 - Ed Lucas

我正在使用3.1.4版本。 - Pouya Kermanshahi

Answer 1

要更改颜色实用类的不透明度，需要在颜色后加上斜杠和透明度值（0-100），而不是破折号。例如，bg-skin-base/50 将使用不透明度为 .5。

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

详情和示例请参见：https://tailwindcss.com/docs/text-color#changing-the-opacity。

- Ed Lucas

---

谢谢，@EdLucas。使用bg-skin-base/50为我的元素应用了不透明度值！ - Pouya Kermanshahi

Answer 2

我认为你已经接近答案了，但是你需要在你的 tailwind.config.js 中添加一个函数。这里是 Tailwind Labs 的 playground，其中有一个名为 withOpacity 的函数在配置文件中。在你的 tailwind 配置文件中，你可以在定义颜色时调用它：

base: withOpacity('--base'),

您可以在这个视频中看到操作步骤，从17分钟开始一直到结束。他们还解释了为什么应该这样做。

希望这能帮到您。

编辑：根据Ed Lucas的建议，在Tailwind 3.1上您可以使用不同的方法。

- Gabe

---

在Tailwind CSS 3.1+版本中，这已经不再是必需的了。https://tailwindcss.com/blog/tailwindcss-v3-1#easier-css-variable-color-configuration - Ed Lucas

谢谢，@EdLucas！总是很高兴在帮助别人的时候学到一些东西 :-) - Gabe

谢谢你的回答。我看了那个视频并使用了 withOpacity 函数。我认为问题出在我添加不透明度的方式上。我看了 Tailwind 的文档，建议使用 - 来应用不透明度。 - Pouya Kermanshahi

Answer 3

在我的情况下，我通过在我的主页模板中添加以下代码到头部解决了这个问题...

    <!-- Styles -->
    @livewireStyles

- timoleon