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

Viewed 6852

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).

3 Answers

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

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.

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.

Related