尾风CSS |如何在配置文件中设置正确的颜色以呈现为 RGB/RGBA答案

【问题标题】：TailwindCSS | how to set correct color inside config file to be rendered as RGB/RGBA尾风CSS |如何在配置文件中设置正确的颜色以呈现为 RGB/RGBA
【发布时间】：2021-09-20 20:07:30
【问题描述】：

Tailwind 提供了从另一个配置对象中的配置获取价值的好选择

module.exports = {
  theme: {
    colors: {
      primary: 'red'
    },
    extend: {
      colors: theme => ({
        secondary: theme('colors.primary') // will be red 
      })
    }
  }
}

但是当我想使用 RGBA 创建类时，这不起作用。我想创建类似的东西

module.exports = {
  theme: {
    colors: {
      primary: 'red'
    },
    extend: {
      boxShadow: theme => ({
        extra: "0 0 999px rgba(theme('colors.primary'), .25))"
      }),
    }
  }
}

这将呈现不正确的 CSS 值的 0 0 999px rgba(red, .25) - 您需要将 red 传递为 255, 0, 0。但我想使用在我的配置中定义的colors.primary

我知道 Tailwind 有它自己的构建工具来转换颜色，例如 asRgba、withAlphaVariable。例如，当您使用 text-white 时，Tailwind 会将其呈现为 color: rgba(255,255,255,var(--tw-text-opacity));。但是如何使用呢？

所以基本上我怎样才能实现这一点 - 将颜色键从我的配置传递到另一个属性并将其呈现为 RGB/RGBA？

更新：我希望第三方 (TW) 像其他人一样工作

DEMO

【问题讨论】：

标签： tailwind-css

【解决方案1】：

我认为你的想法是错误的，因为 tailwind colors 是用 HEX 数字定义的，但是你试图将它转换为 RGBA 类型，所以我认为你需要先转换才能使用。无论如何，让我们知道你的成功:)

检查这个doc

【讨论】：

不，不幸的是，即使在您的操场上，这也不起作用，shadow-extra 类什么都不做。如果我将传递 rgb 值，它会完成这项工作，但问题是如何避免这种情况并使用配置的颜色键
这正是我的问题的重点。我之前检查过这个链接。用演示更新了问题，也许它会有所帮助。谢谢）