Underline Color Utilities Plugin for Tailwind (v1.2.0)

1.tailwindUnderlineColor.js

const plugin = require('tailwindcss/plugin')

/*
  Creates colored underline utility classes.
  
  Explanation: https://css-tricks.com/almanac/properties/t/text-decoration-color/
  Browser Support: https://caniuse.com/#search=text-decoration-color
  
  e.g
  
  .underline-black => text-decoration: underline #000 !important;
  .underline-green-400 => text-decoration: underline #68d391 !important;
*/
const underlineColorPlugin = plugin(function ({ addUtilities, e, theme, variants }) {
  const colors = theme('colors', {})
  const underlineColorVariants = variants("underlineColor", []);

  const utilities = Object.entries(colors).map(
    ([color, colorValue], i) => {
      if (typeof colorValue === 'object') {
        return Object.entries(colorValue).map(
          ([colorVariant, value]) => {
            return {
              [`.underline-${e(color)}-${e(colorVariant)}`]: {
                textDecoration: `underline ${value}`
              }
            };
          }
        )
      } else {
        return {
          [`.underline-${e(color)}`]: {
            textDecoration: `underline ${colorValue}`
          }
        };
      }
    }
  );

  addUtilities(utilities, underlineColorVariants);
})

2.tailwind.config.js

// Usage in tailwind.config.js

// 1) Plonk the above plugin code somewhere importable (or at the top of your Tailwind config).
// 2) Define in Tailwind config's `plugins` array.
// 2) Specify the `underlineColor` variants array (optional, no variants created by default)
//    The example below will generate .hover:underline-teal-400 etc.

module.exports = {
    ...
    
    variants: {
      ...
      underlineColor: ["hover"],
    },
    plugins: [
      ...
      underlineColorPlugin,
    ]
  }

3.example-output.css

/* With PostCSS handling vendor prefixes */

.underline-black {
  -webkit-text-decoration: underline #000 !important;
          text-decoration: underline #000 !important;
}

.underline-green-100 {
  -webkit-text-decoration: underline #f0fff4 !important;
          text-decoration: underline #f0fff4 !important;
}

.hover:underline-green-200 {
  -webkit-text-decoration: underline #c6f6d5 !important;
          text-decoration: underline #c6f6d5 !important;
}

.etc .etc