如何实现rgba(0, 0, 0, 0.54) tailwind css的文本颜色？

Question

如何实现 rgba(0, 0, 0, 0.54) tailwind css 的文本颜色。 我尝试过 text-black-500、text-current 和许多其他变体，但无法实现 rgba(0, 0, 0, 0.54) 的颜色。

Answer 1

Tailwind 允许您使用类控制颜色不透明度。

示例：

text-black/50

（相当于

rgba(0, 0, 0, 0.5)

）

在 Tailwind v3 中，有几种方法可以设置

rgba(0, 0, 0, 0.54)

的文本颜色值：

1.使用任意值

对于一次性值，在主题配置文件中定义它们并不总是有意义。在这些情况下，传递任意值可能会更快、更容易。

示例：

text-black/[.54]

2.定义自定义不透明度比例值 54

在您的

tailwind.config.js file

中，注册一个新的不透明度值。

module.exports = {
  theme: {
    extend: {
      opacity: {
        '54': '.54',
      }
    }
  }
};

用途：

text-black/54

选择此选项时，您可能希望为该值指定一个更具描述性的名称。

Answer 2

您需要在

tailwind.config.js

上定义自定义颜色类

 module.exports = {
  theme: {
    extend: {
      colors: {
        'black-rgba': 'rgba(0, 0, 0, 0.54)',
      },
    },
  },
  variants: {},
  plugins: [],
}

HTML：

<span class="text-black-rgba text-4xl">Hi there!</span>

工作示例

Answer 3

使用 Tailwind 2 执行此操作的另一种方法是使用类：

text-black text-opacity-50

或

bg-black bg-opacity-50

。

Answer 4

如果您使用的是 tailwindcss 版本 2 或更高版本，则可以使用 Just-in-Time 模式。请看一下这个链接。对于特定的文本颜色，您必须将颜色放在方括号中。就像这个

text-[rgba(0, 0, 0, 0.5)]

。这是更简单的解决方案。

Answer 5

或者使用在线 rgba 到十六进制转换器，例如 - rgbacolorpicker 并使用这样的代码 - className="bg-[#0000008a]"

Answer 6

只需使用方括号表示法，例如 text-[rgba(0,0,0,0.8)]