如何实现 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.config.js

上定义自定义颜色 class

 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>

Working example

Answer 2

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

示例：text-black/50（相当于rgba(0, 0, 0, 0.5)）

在 Tailwind v3 中，有几种方法可以设置 rgba(0, 0, 0, 0.54) 的文本颜色值：

1。使用任意值

对于 one-off 值，在主题配置文件中定义它们并不总是有意义。在这些情况下，传入任意值会更快更容易。

示例：text-black/[.54]

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

在您的 tailwind.config.js file 中，注册一个新的不透明度值。

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

用法：text-black/54

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

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

how can I achieve text color of rgba(0, 0, 0, 0.54) tailwind css?

tailwind-css

1。使用任意值

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