How to Set Text Color in RGBA in Tailwind CSS ?

Last Updated : 12 Sep, 2023

In this article, we will change the color of text to rgba(0, 0, 0, 0.54) which is an RGB color format with an added parameter alpha that tells the opacity of the color.

In this article, we are going to learn how we can achieve the text color of rgba(0, 0, 0, 0.54) in Tailwind CSS and hence, change the text color of the given element. While there can be multiple ways to do the same. In this article, we will focus on how we can change our text color by customizing and extending colors using the “tailwind.config“.

tailwind.config: It is an object that can be used to customize or change various configurations in our project like adding colors, fonts, utilities, etc.

Syntax:

You can customize the tailwind.config and add colors using the below syntax:

<script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    mycolor: "rgba(0,0,0,0.54)"
                }
            }
        }
    }
</script>

Then, by using the tailwind utility class, you can apply the “text-mycolor” classname to change the color of the text to the color you have mentioned as shown below:

<p class="text-mycolor">...</p>

Approach

The approach we choose in this article is to extend the tailwind css theme by adding our own color inside tailwind.config as described above and then using the tailwind utility class we created on the desired element to change it’s text color.

Installation Steps:

To install tailwindCSS in our project, add the following script tag inside the head tag.

<script src="https://cdn.tailwindcss.com"></script>

Example 1: In this example, we have changed the color of the p tag to rgba(0, 0, 0, 0.54) using the above-shown method.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
  
    <!-- Import tailwindCSS -->
    <script src= 
        "https://cdn.tailwindcss.com"> 
    </script> 
  
    <!-- Define Custom color -->
    <script> 
        tailwind.config = { 
            theme: { 
                extend: { 
                    colors: { 
                        mycolor: "rgba(0,0,0,0.54)", 
                    }, 
                }, 
            }, 
        }; 
    </script> 
</head> 
  
<body> 
    <h1 class="text-3xl text-green-500 font-bold"> 
        GeeksforGeeks 
    </h1> 
    <p> 
        how can I achieve text color of  
        rgba(0, 0, 0, 0.54) tailwind css? 
    </p> 
      
    <!-- Apply custom color as class name -->
    <p class="text-mycolor"> 
        My color is rgba(0,0,0,0.54) 
    </p> 
</body> 
  
</html>

Output:

Example 1: how to change text color to rgba(0,0,0,0.54) tailwind css

Example 2: In this example, we have changed the color of the whole div tag which changes the color of each element inside it.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
  
    <!-- Import tailwind in html file -->
    <script src= 
        "https://cdn.tailwindcss.com"> 
    </script> 
  
    <!-- Define custom properties -->
    <script> 
        tailwind.config = { 
            theme: { 
                extend: { 
                    colors: { 
                        mycolor: "rgba(0,0,0,0.54)", 
                    }, 
                }, 
            }, 
        }; 
    </script> 
</head> 
  
<body> 
    <h1 class="text-3xl text-green-500 font-bold"> 
        GeeksforGeeks 
    </h1> 
    <p> 
        how can I achieve text color of  
        rgba(0, 0, 0, 0.54) tailwind css? 
    </p> 
      
    <!-- Use custom property in classname -->
    <div class="card p-8 w-96 shadow text-mycolor"> 
        <h2 class="text-xl font-bold">This is title</h2> 
        <p class="text-xs">This is a paragraph...</p> 
        <button class="mt-2 bg-gray-100 p-2 rounded"> 
            Read more 
        </button> 
    </div> 
</body> 
  
</html>

Output:

Example 2: how can i achieve text color of rgba(0,0,0,0.54) tailwind css

In this article, we learned how to customize our theme to add new colors and hence we change the color of the text to rgba(0, 0, 0, 0.54) and achieved our goal.

Reference: https://tailwindcss.com/docs/customizing-colors