Add text-decoration-color utilities

[MichaelAllenWarner]

Adds utilities for the text-decoration-color property (including opacity utilities) [EDIT: no dedicated opacity utilities], as green-lit here.

Example usage:

<a href="#" class="underline decoration-blue hover:decoration-blue/50">Link with blue underline that dims on hover</a>

[MichaelAllenWarner]

The instructions for creating a /dist/tailwind.css file for testing manually did not work for me. Neither did the npm run babelify part of the instructions just before. They may be out of date.

[lukewarlow]

I think this is doing the same as #5762 is trying to.

[adamwathan]

Thanks for this! Can we ditch the textDecorationOpacity plugin? Going forward for new color stuff I want to just encourage the shorthand syntax (decoration-red-500/25), and only keep existing color opacity stuff for backwards compatibility.

Good to merge after that stuff is removed!

The instructions for creating a /dist/tailwind.css file for testing manually did not work for me. Neither did the npm run babelify part of the instructions just before. They may be out of date.

Yeah these are definitely out of date — what you have testing-wise here is great 👍

[MichaelAllenWarner]

@adamwathan

Sure thing.

I have a quick question. For this line in corePlugins.js:

{ values: flattenColorPalette(theme('textDecorationColor')), type: 'color' }

should the type be 'color' or ['color', 'any']? Looking at other color-related utilities I'm seeing both.

[MichaelAllenWarner]

(It looks like 'any' is needed to allow CSS variables as bracketed values in JIT mode, so I'm going with that unless you object.)

[lukewarlow]

I believe the any is for arbitrary value support.

[MichaelAllenWarner]

Explicit opacity utilities have been removed.

I ran npm run test after switching one of the tests in color-opacity-modifiers.test.js from a background-color check to a text-decoration-color check, and it passed, so it looks like the JIT slash syntax is working (I did not overwrite the file with that change, however).

[adamwathan]

Looks great, thank you! 🙌🏻

[kripod]

This is a great addition! I think the default tokens should be inferred from textColor rather than just color, similarly to how divideColor inherits its defaults from borderColor.

[arthurshlain]

Not working with currentColor with opacity:

decoration-current/50

The `decoration-current/50` class does not exist.