How to Change the Underline Color in Tailwind CSS ?

Last Updated : 07 May, 2023

The Tailwind underline class adds an underline to the text, and the decoration-color class changes the color of the text-decoration property. Both classes can be used together to add an underline and color to the text.

Syntax: The syntax for the tailwind underline and decoration-color classes is as follows.

<element class="underline decoration-{color}-weight"></element>

Note that the {color} should be replaced with valid tailwind color and weight should be a numeric value ( like 100,200..)

Let’s create a new HTML project and add the tailwind CSS into the project using the following CDN <script> tag. Copy the below line of code and insert it into <head> of your HTML file.

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

Now, we can use tailwind classes in our project.

Example 1: In the below example, we have created an <p> element with sample content and applied an underline to its text content using the “underline” tailwind class. After that, we applied the “decoration-red-700” class to replace the default color of the underline of the text with red color.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <script src= 
        "https://cdn.tailwindcss.com"> 
    </script> 
</head> 
  
<body class="text-2xl"> 
    <h1 class="text-green-900 font-bold"> 
        GeeksforGeeks 
    </h1> 
  
    <h3 class="font-bold"> 
        "How can I change the underline  
        color in tailwind css" 
    </h3> 
    <br> 
      
    <p class="underline decoration-red-700"> 
        Text Underline 
    </p> 
</body> 
  
</html> 

Output:

Another way to add a custom color underline is to use the border-bottom CSS property along with the border-color property to change the default black border color and apply a custom color to it. Tailwind border CSS classes are available that allow us to apply the border and change the border color. Let’s use these tailwind classes and apply a custom color border as an underline to the text.

Example 2: In the below example, we have used the same <p> element and applied a red color border to the bottom of the text. A button is created to change the color of the border with on click event. When the button will receive a click event the border color will be replaced with a new color.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <script src= 
        "https://cdn.tailwindcss.com"> 
    </script> 
</head> 
  
<body class="text-2xl p-10"> 
    <h1 class="text-green-900 font-bold"> 
        GeeksforGeeks 
    </h1> 
    <h3 class="font-bold"> 
        "How can I change the underline  
        color in tailwind css" 
    </h3> 
    <br> 
    <p class="w-fit border-solid  
        border-b-4 border-red-800"> 
        Text Underline 
    </p> 
    <br> 
    <button onclick="changeUnderlineColor()" 
        class="text-lime-100 p-2 bg-green-700 rounded"> 
        Change Underline color 
    </button> 
  
    <script> 
        const changeUnderlineColor = () => { 
            document.getElementsByTagName('p')[0] 
                .classList.remove('border-red-800'); 
            document.getElementsByTagName('p')[0] 
                .classList.add('border-fuchsia-500'); 
        } 
    </script> 
</body> 
  
</html> 