Question

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))"
      }),
    }
  }
}

这将呈现 0 0 999px rgba(red, .25)，这是不正确的 CSS 值 - 您需要将 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

Answer 1

我认为您的想法是错误的，因为tailwind colors 是用HEX 数定义的，但是您试图将其使用为RGBA 类型，因此我认为如果您想走自己的路，则需要先进行转换。无论如何，让我们知道您的成功:)

检查这个doc

TailwindCSS |如何在配置文件中设置正确的颜色以呈现为 RGB/RGBA

1 个答案: