Question

how can I achieve text color of rgba(0, 0, 0, 0.54) tailwind css. I have tried text-black-500, text-current and many other variations but couldn t achieve color of rgba(0, 0, 0, 0.54).

Answer 1

Tailwind allows you to control color opacity using classes.

例:text-black/50(等到rgba(0,0,0,0.5)

在“Tailwind v3”中,有两种办法确定“代码”的字面值(0、0、0、0.54)

1. Use an arbitrary value

对于一次性价值,在您的主题文件中界定这些价值并不总是有意义的。在这些情况下,可以更快和更容易地以武断的价值通过。

例:text-black/[54]

2. Define a custom opacity scale value of 54

在您的<代码>tailwind.config.js file 上,登记了新的不透明价值。

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

Usage:text-black/54

在采取这一办法时,你不妨给出一个更具描述性的名称。

Answer 2

页: 1

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

传真:

<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

如果你使用尾窗2或更多版本,你可以使用Just-in-time Mode。请参看。具体案文,须将彩色放在方括号内。同这一条一样,text-[rgba(0,0,0,0.5)]。这是一种更为容易的解决办法。

Answer 5

或使用在线增压器,如 rgbacolorpicker ,并使用该代码,例如:Name=“bg-[#0008a]”。

Answer 6

仅使用平板彩票,如text-[rgba(0,0,0,0.8)]。

1. Use an arbitrary value

2. Define a custom opacity scale value of 54

友情链接