Support for text decoration color?

[paulpopus]

It would be useful to have out of the box styling for the text-decoration-color property. It is widely supported and it would be useful for styling links primarily. Although it is not a crucial feature.

---

For anybody wanting to do this, I've made a utility that extends your theme config colours and adds the decoration-color class for the same variants as textColor.

// tailwind.config.js
const _ = require('lodash');

module.exports = {
...
...
plugins: [
    ...
    function({ addUtilities, e, theme, variants }) {
      const colors = theme('colors', {})
      const decorationVariants = variants('textDecoration', [])

      const textDecorationColorUtility = _.map(colors, (color, name) => ({
        [`.decoration-color-${e(name)}`]: {
          textDecorationColor: `${color}`
        }
      }))

      addUtilities(textDecorationColorUtility, decorationVariants)
    },
  ],
}

then you could do something like this

<a class="text-underline hover:decoration-color-black">

@apply version if you really need it:

:hover {
    @apply decoration-color-black;
}

You will need to expand the function above for nested colours though.

[wadefletch]

I'm looking for the same feature. Pending the opinion of @adamwathan I'd be happy to write tests and submit a PR for this feature.

[sidcraftscode]

+1

[Camus1859]

Where does this go?

a {
@apply underline;

&:hover {
@apply decoration-color-black;
}
}

[paulpopus]

I was hastily writing it at the time, I've updated it with a better example.

It was just meant to show how you can use it with an @apply which isn't really a recommended way of using Tailwind but it's there.

[travisp]

If it's helpful to anyone, here is the modified plugin function I wrote to use nested colors:

//tailwind.config.js

const plugin = require('tailwindcss/plugin')
const _ = require('lodash')

const returnTextDecorationColorMapping = function(e, colors, prefix = null) {
  return _.flatMap(colors, (color, name) => {
    if (typeof color === 'string' || color instanceof String) {
      let fullName = (prefix) ? `${prefix}-${name}` : name

      return {
        [`.decoration-color-${e(fullName)}`]: {
          textDecorationColor: `${color}`
        }
      }
    } else {
      let newPrefix = (prefix) ? `${prefix}-${name}` : name
      return returnColorMapping(e, color, newPrefix)
    }
  })
}

...

  plugins: [
    ...,
    plugin(function({ addUtilities, e, theme, variants}) {
      const colors = theme('colors', {})
      const decorationVariants = variants('textDecoration', [])
      const textDecorationColorUtility = returnTextDecorationColorMapping(e, colors)

      addUtilities(textDecorationColorUtility, decorationVariants)
    }),
  ],

[maximedupre]

If it's helpful to anyone, here is the modified plugin function I wrote to use nested colors:

Iterated on this to make sure you don't need to specify the 'DEFAULT' variant:

    function ({ addUtilities, e, theme, variants }) {
            const colors = theme('colors', {});

            const utility = Object.keys(colors).reduce((acc, key) => {
                if (typeof colors[key] === 'string') {
                    return {
                        ...acc,
                        [`.decoration-${e(key)}`]: {
                            'text-decoration-color': colors[key],
                        },
                    };
                }

                const variants = Object.keys(colors[key]);

                return {
                    ...acc,
                    ...variants.reduce((a, variant) => {
                        const utilSuffix =
                            variant === 'DEFAULT' ? '' : `-${variant}`;

                        return {
                            ...a,
                            [`.decoration-${e(key)}${utilSuffix}`]: {
                                'text-decoration-color': colors[key][variant],
                            },
                        };
                    }, {}),
                };
            }, {});

            addUtilities(utility);
        }

[dance2die]

I am creating a custom text-decoration plugin (downwindcss/text-decoration).

Check out the Tailwind Play using transpiled source: https://play.tailwindcss.com/tQSnU0tOUe
Uses td- instead of text-decoration- prefix in this play

I requested for naming convention #4165 last week as the name can be quite long.
And decided to go with the long form name.

The plan is to support all text-decoration properties (style, line, thickness, color).
The color will use all TW colors as well as custom colors.

Still working on adding tests/storybook (and haven't published the composable version to NPM yet).

[MichaelAllenWarner]

Surprised this one hasn't made it to core yet. All the majors browsers have supported it for some time (Safari since v. 8, believe it or not; without the -webkit prefix since v. 12.1), and I've recently seen more requests from designers for customized underline colors (and opacities).

IMO, well-supported color-related properties like this deserve special consideration for integration as core utilities because custom plugins that loop through theme('colors') don't play well with colors defined as functions.

[adamwathan]

Happy to accept a PR for this one at this point! Probably just as decoration-{color}? I don't think any realistic potential for collision with the decoration-clone/slice utilities for box-decoration-break.

[stefanfisk]

Decoration opacity would be nice as an option at least. It's the cleanest way of transitioning the text decoration opacity, since transitions between transparent/#0000 and any other color than black look bad.

[adamwathan]

Hey! You can do this using opacity modifiers, like <div class="decoration-red-500/0 hover:decoration-red-500" 👍🏻