如何实现 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。