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

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

tailwind-cssassemblysasm


Solution 1:[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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nathan Dawson

Related Questions