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

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.

Example: text-black/50 (equivalent to rgba(0, 0, 0, 0.5))

In Tailwind v3, there are a couple of ways to set a text color value of rgba(0, 0, 0, 0.54):

1. Use an arbitrary value

For one-off values, it doesn't always make sense to define them in your theme config file. In those cases, it can be quicker and easier to pass in an arbitrary value instead.

Example: text-black/[.54]

2. Define a custom opacity scale value of 54

In your tailwind.config.js file, register a new opacity value.

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

Usage: text-black/54

When taking this option, you may wish to give the value a more descriptive name.

Answer 2

You need to define a custom color class on 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>

Working example

Answer 3

Another way of doing this with Tailwind 2 is to use the classes: text-black text-opacity-50 or bg-black bg-opacity-50.

Answer 4

If you are using tailwindcss version 2 or more, you can use Just-in-Time Mode. Please take a look at this link. For specific text color you have to put color in square bracket. Like this one text-[rgba(0, 0, 0, 0.5)]. It is far more easy solution.

Answer 5

or use an online rgba to hex converter like - rgbacolorpicker and use the code like this - className="bg-[#0000008a]"

Answer 6

Just use a square bracket notation, like text-[rgba(0,0,0,0.54)]

Make sure there is no space inside the parentheses.

Answer 7

if you want to use a custom color without any configuration on tailwind.config.js you can use this : <p class="text-[#F5FCEB]/[.35]" >Hello Word !</p>