How can I change the underline color in tailwind css

Question

The default underline color in tailwind css is black. How can I change this color for example to a light green. They have listed a way for one to change the default link underline color in the base style as below

@tailwind base;

a {
  color: theme('colors.blue');
  text-decoration: underline;
}

@tailwind components;
@tailwind utilities;

How would one go about changing the default normal underline color for say a span tag

Answer 1

There is no way to do that using the default tailwindcss build.

There are 2 ways to override the underline color:

1. Using simple CSS on your global CSS file

   .underline {
       text-decoration-color: red;
       text-decoration: underline;
   }
   

2. Extend the underline using the tailwind.config.js config file:

   module.exports = {
       theme: {
           extend: {}
       },
       variants: {},
       plugins: [
           function ({addUtilities}) {
               const extendUnderline = {
                   '.underline': {
                       'textDecoration': 'underline',
                       'text-decoration-color': 'red',
                   },
               }
               addUtilities(extendUnderline)
           }
       ]
   }