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