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